记录最近打开detail页面的视图,当回到该视图时,恢复detail页面

This reverts commit 088cd70e41.

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'standard/no-callback-literal': 0
   }
 }

.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,28 @@
+---
+name: 报告Bug(请先查看常见问题及搜索已关闭issue列表中有无你要提的问题)
+about: 创建报告以帮助我们改进
+title: '（未回答的问题请删除，减少多余信息干扰）'
+labels: bug
+assignees: ''
+
+---
+
+
+**描述错误**
+清楚简洁地说明错误是什么。
+
+**重现**
+重现行为的步骤
+
+**预期行为**
+对您期望发生的事情的简洁明了的描述。
+
+**截图**
+如果适用，请添加屏幕截图以帮助解释您的问题（直接把图片拖到编辑框即可添加图片）。
+
+**环境：**
+  -操作系统及版本：[例如：Windows 10 64位 18362.156]
+  -软件安装包及版本：[例如：Windows 64位绿色版 1.0.0]
+
+**其他内容**
+在此处添加有关该问题的任何其他上下文。

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,17 @@
+---
+name: 功能请求(请先查看常见问题及搜索issue列表中有无你要提的问题)
+about: 为这个项目提出一个想法
+title: 例如：添加xxx功能、优化xxx功能（未回答的问题请删除）
+labels: enhancement
+assignees: ''
+
+---
+
+**描述您想要的解决方案**
+简洁明了地描述您要发生的事情。
+
+**描述您考虑过的替代方案**
+对您考虑过的所有替代解决方案或功能的简洁明了的描述。
+
+**其他内容**
+在此处添加有关功能请求的任何其他上下文或屏幕截图（直接把图片拖到编辑框即可添加图片）。

.github/ISSUE_TEMPLATE/help.md

@@ -0,0 +1,19 @@
+---
+name: 需要帮助
+about: "其它问题"
+labels: help wanted
+
+---
+
+### 版本、安装方式、系统
+
+1. 你在使用什么版本的
+
+2. 你通过什么方式安装
+
+3. 你所使用的操作系统
+
+
+### 描述问题：
+
+<!-- 在下方描述问题 -->

README.md

@@ -29,6 +29,7 @@
 ### ✨特性
 
 - 🍕 全平台支持. Windows, Mac, Linux
+- 🍥 支持 IPTV, 卫视直播
 - 🍔 视频源支持自定义, 支持导入, 导出
 - 🍟 支持海报模式和列表模式浏览资源
 - 🌭 播放历史, 自动跳转历史进度
@@ -41,9 +42,19 @@
 
 ### 🌴 下载
 
-- 🍓 [Github -- 官方下载](https://github.com/Hunlongyu/ZY-Player/releases)
-- 🍉 [蓝奏云 -- 快速下载](https://www.lanzoux.com/b04s6a3re) 密码:95px
-- 🍒 适用于32位操作系统的x86软件,在蓝奏云网盘里, 后缀名: ZY Player * 32位.exe
+- 🎃 软件暂时关闭下载通道. 请大家支持正版.
+- 🎭 所有资源来自网上, 该软件不参与任何制作, 上传, 储存等内容, 禁止传播违法资源. 该软件仅供学习参考, 请于安装后24小时内删除.
+
+### 🎠 平台
+
+| 平台                                  | 链接                                                        |
+| :------------------------------------ | :---------------------------------------------------------- |
+| 🖥️ 电脑端 ( Windows & Mac & Linux )    | [ZY Player](https://github.com/Hunlongyu/ZY-Player)         |
+| 📱 手机端 ( Android & IOS )            | [ZY Player APP](https://github.com/Hunlongyu/ZY-Player-APP) |
+| 📺 电视端 ( Android & Mac ) ( 进行中 ) | [ZY Player TV](https://github.com/cuiocean/ZY-Player-TV)    |
+| 🌐 浏览器 ( Web )                      | [ZY Player Web](https://github.com/Hunlongyu/ZY-Player-Web) |
+
+
 
 ### 🚀 快捷键
 
@@ -80,13 +91,8 @@
 
 ### 🍭 开发者
 
-|          [Hunlongyu](https://github.com/Hunlongyu)           |           [cuiocean](https://github.com/cuiocean)            |
-| :----------------------------------------------------------: | :----------------------------------------------------------: |
-| <img width="120" src="https://avatars2.githubusercontent.com/u/15273630?s=460&u=48cf3299e2a842c0252233d8be42ef4c5d792138&v=4"/> | <img width="120" src="https://avatars0.githubusercontent.com/u/5760235?s=460&u=9d969dd8d83f069ce7ebd60516770c93ac07a330&v=4" /> |
-|                            💻 🎨 🐛                             |                             💻 🐛                              |
+|          [Hunlongyu](https://github.com/Hunlongyu)           |           [cuiocean](https://github.com/cuiocean)            |              [buvta](https://github.com/buvta)               |
+| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
+| <img width="120" src="https://avatars2.githubusercontent.com/u/15273630?s=460&u=48cf3299e2a842c0252233d8be42ef4c5d792138&v=4"/> | <img width="120" src="https://avatars0.githubusercontent.com/u/5760235?s=460&u=9d969dd8d83f069ce7ebd60516770c93ac07a330&v=4" /> | <img width="120" src="https://avatars3.githubusercontent.com/u/12312540?s=400&v=4" /> |
+|                            💻 🎨 🐛                             |                             💻 🐛                              |                             💻 🐛                              |
 
-
-
-### 🧧 赞助
-
-[![LATOPAY](https://latopay.com/w/lt-bg-2062.png)](https://latopay.com/@Hunlongyu)

docs/index.html

@@ -89,7 +89,7 @@
 
         <div class="section-title">
           <h2>软件特色</h2>
-          <p>经过三个大版本更迭, 软件功能丰富, 操作简单.</p>
+          <p>软件功能丰富, 操作简单.</p>
         </div>
 
         <div class="row no-gutters">
@@ -99,7 +99,7 @@
                 <div class="col-md-6 icon-box" data-aos="fade-up">
                   <i class="bx bx-receipt"></i>
                   <h4>浏览</h4>
-                  <p>浏览全网热门视频, 支持切换视频源. 详细的电影分类.支持搜索电影名和演员名称. </p>
+                  <p>浏览全网热门视频, 支持切换视频源. 详细的电影分类. </p>
                 </div>
                 <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
                   <i class="icofont-play-alt-3"></i>
@@ -124,7 +124,7 @@
                 <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
                   <i class="icofont-cubes"></i>
                   <h4>其他</h4>
-                  <p>多主题, 多语言, 自动更新</p>
+                  <p>多主题, 自动更新</p>
                 </div>
               </div>
             </div>
@@ -146,14 +146,14 @@
         </div>
 
         <div class="owl-carousel gallery-carousel" data-aos="fade-up">
-          <a href="assets/img/gallery/001.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/001.png" alt=""></a>
-          <a href="assets/img/gallery/002.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/002.png" alt=""></a>
-          <a href="assets/img/gallery/003.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/003.png" alt=""></a>
-          <a href="assets/img/gallery/004.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/004.png" alt=""></a>
-          <a href="assets/img/gallery/005.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/005.png" alt=""></a>
-          <a href="assets/img/gallery/006.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/006.png" alt=""></a>
-          <a href="assets/img/gallery/007.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/007.png" alt=""></a>
-          <a href="assets/img/gallery/008.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/008.png" alt=""></a>
+          <a href="assets/img/gallery/01.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/01.png" alt=""></a>
+          <a href="assets/img/gallery/02.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/02.png" alt=""></a>
+          <a href="assets/img/gallery/03.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/03.png" alt=""></a>
+          <a href="assets/img/gallery/04.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/04.png" alt=""></a>
+          <a href="assets/img/gallery/05.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/05.png" alt=""></a>
+          <a href="assets/img/gallery/06.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/06.png" alt=""></a>
+          <a href="assets/img/gallery/07.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/07.png" alt=""></a>
+          <a href="assets/img/gallery/08.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/08.png" alt=""></a>
         </div>
 
       </div>
@@ -193,7 +193,7 @@
               <i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#accordion-list-3" class="collapsed">跨平台<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
               <div id="accordion-list-3" class="collapse" data-parent=".accordion-list">
                 <p>
-                  目前支持 Windows, Mac, Linux 桌面系统. 暂不支持手机端或者电视端. 未来会考虑实现全平台.
+                  目前支持 Windows, Mac, Linux, Android, IOS, TV, Web 全平台.
                 </p>
               </div>
             </li>
@@ -236,6 +236,7 @@
               <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="#">Home</a></li>
               <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://www.ghpym.com/zyplayer.html">果核剥壳</a></li>
               <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://www.iplaysoft.com/zy-player.html">异次元软件世界</a></li>
+              <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://xydh.fun/">炫辕</a></li>
             </ul>
           </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zy",
-  "version": "2.4.6",
+  "version": "2.7.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -17,48 +17,56 @@
   },
   "main": "background.js",
   "dependencies": {
-    "axios": "^0.19.2",
-    "cheerio": "^1.0.0-rc.3",
-    "child_process": "^1.0.2",
-    "core-js": "^3.6.5",
-    "cors": "^2.8.5",
-    "dexie": "^3.0.1",
+    "axios": "^0.21.1",
+    "cheerio": "^1.0.0-rc.5",
+    "core-js": "^3.9.0",
+    "dexie": "^3.0.3",
     "electron-localshortcut": "^3.2.1",
-    "element-ui": "^2.13.2",
-    "express": "^4.17.1",
-    "fast-xml-parser": "^3.17.4",
-    "html2canvas": "^1.0.0-rc.5",
-    "modern-normalize": "^0.6.0",
+    "electron-proxy-agent": "^1.2.0",
+    "electron-updater": "^4.3.5",
+    "element-ui": "^2.15.0",
+    "fast-xml-parser": "^3.18.0",
+    "html2canvas": "^1.0.0-rc.7",
+    "iptv-playlist-parser": "^0.6.0",
+    "m3u": "0.0.2",
+    "m3u8-parser": "^4.5.2",
+    "memcached": "^2.2.2",
+    "modern-normalize": "^1.0.0",
     "mousetrap": "^1.6.5",
+    "pinyin-match": "^1.2.0",
     "qrcode.vue": "^1.7.0",
     "randomstring": "^1.1.5",
-    "vue": "^2.6.11",
+    "session": "^0.1.0",
+    "sortablejs": "^1.13.0",
+    "v-fit-columns": "^0.2.0",
+    "vue": "^2.6.12",
     "vue-infinite-loading": "^2.4.5",
-    "vue-waterfall-plugin": "^1.0.7",
-    "vuedraggable": "^2.24.1",
-    "vuex": "^3.4.0",
-    "xgplayer": "^2.9.10",
-    "xgplayer-hls.js": "^2.2.3"
+    "vue-waterfall-plugin": "^1.1.0",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "xgplayer": "^2.18.0",
+    "xgplayer-flv.js": "^2.2.0",
+    "xgplayer-hls.js": "^2.4.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-vuex": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/cli-plugin-babel": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-vuex": "~4.5.11",
+    "@vue/cli-service": "~4.5.11",
+    "@vue/eslint-config-standard": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
-    "electron": "^9.0.5",
-    "electron-devtools-installer": "^3.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
+    "electron": "^11.3.0",
+    "electron-devtools-installer": "^3.1.1",
+    "eslint": "^7.20.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "vue-cli-plugin-electron-builder": "2.0.0-rc.4",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^7.6.0",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.1.0",
+    "vue-cli-plugin-electron-builder": "2.0.0-rc.6",
+    "vue-template-compiler": "^2.6.12"
   }
 }

public/index.html

@@ -4,8 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="referrer" content="same-origin"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title><%= htmlWebpackPlugin.options.title %></title> 
   </head>
   <body>
     <noscript>

src/App.vue

@@ -8,6 +8,9 @@
       <Star v-show="view === 'Star'" />
       <History v-show="view === 'History'" />
       <Setting v-show="view === 'Setting'" />
+      <IPTV v-show="view === 'IPTV'" />
+      <EditSites v-if="view === 'EditSites'"/>
+      <Recommendation v-show="view === 'Recommendation'" />
     </div>
     <transition name="slide">
       <Detail v-if="detail.show"/>
@@ -15,9 +18,6 @@
     <transition name="slide">
       <Share v-if="share.show"/>
     </transition>
-    <transition name="slide">
-      <EditSites v-if="editSites.show"/>
-    </transition>
   </div>
 </template>
 
@@ -44,6 +44,9 @@ export default {
     },
     editSites () {
       return this.$store.getters.getEditSites
+    },
+    recommendation () {
+      return this.$store.getters.recommendation
     }
   },
   watch: {

src/assets/scss/style.scss

@@ -78,99 +78,27 @@
     }
   }
 }
-.zy-checkbox{
+.zy-input{
   position: relative;
-  display: flex;
+  display: inline-block;
+  white-space: nowrap;
   width: 200px;
   height: 30px;
-  vertical-align: middle;
-  align-items: center;
-  .search-all-check-input{
-    cursor: pointer;
-  }
-}
-.zy-highlighted{
-  color: var(--highlight-color);
-}
-// table
-.zy-table{
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-size: 15px;
-  .tHeader{
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    height: 50px;
-    min-height: 50px;
-    width: 100%;
-    border-bottom: 1px solid;
-    .btn{
-      user-select: none;
-      margin-right: 15px;
-      cursor: pointer;
-      font-size: 14px;
-    }
-  }
-  .tBody{
-    flex: 1;
-    border-bottom: 1px solid;
-    overflow: auto;
-    ul{
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      li{
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-direction: row;
-        height: 50px;
-        border-bottom: 1px solid;
-        cursor: pointer;
-        span{
-          display: flex;
-          font-size: 13px;
-          height: 50px;
-          line-height: 50px;
-          overflow: hidden;
-          margin-right: 5px;
-          &.name{
-            flex: 1;
-            min-width: 100px;
-            white-space: nowrap;
-            margin-left: 10px;
-          }
-          &.type{
-            width: 10%;
-          }
-          &.time{
-            width: 10%;
-          }
-          &.last{
-            width: 10%;
-          }
-          &.site{
-            width: 10%;
-          }
-          &.note{
-            width: 10%;
-          }
-          &.operate{
-            .btn{
-              width: 40px;
-            }
-          }
-        }
-      }
-    }
+  cursor: pointer;
+  input{
+    vertical-align: bottom;
+    position: relative;
+    border: none;
+    width: 20px;
+    height: 15px;
+    background-color: #ffffff00;
+    text-indent: 10px;
   }
 }
 // scroll
 .zy-scroll{
   &::-webkit-scrollbar{
-    width: 5px;
+    width: 10px;
     height: 1px;
   }
   &::-webkit-scrollbar-thumb {
@@ -182,6 +110,292 @@
     position: absolute;
   }
 }
+
+// Page of list using el-table
+.listpage{
+  position: absolute;
+  left: 80px;
+  right: 20px;
+  top: 40px;
+  bottom: 20px;
+  width: calc(100% - 100px);
+  height: calc(100% - 60px);
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  .listpage-header, .toolbar{
+    height: 60px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 10;
+    .header-box{
+      height: 100%;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .el-button{
+      font-size: 1rem;
+      border: none;
+      &:hover{
+        cursor: pointer;
+      }
+    }
+    .el-autocomplete{
+      .el-input-group__prepend{
+        border: none;
+        .el-select{
+          width: 100px;
+          .el-input, .el-input__inner{
+            width: 100%;
+            border: none;
+          }
+        }
+      }
+      .el-input .el-input__inner{
+        width: 200px;
+      }
+      .el-input-group__append{
+        border: none;
+      }
+    }
+    .is-loading:before {
+      background-color: none !important;
+    }
+    .el-input{
+      font-size: 1rem;
+      width: 200px;
+    }
+    .popper {
+      font-size: 1rem;;
+      border: none;
+      li {
+        font-size: 1rem;
+        border: none;
+      }
+      .el-select-dropdown__item.selected.hover{ //是上游的bug吗？临时性修补
+        background-color: transparent;
+      }
+      
+      .el-select-dropdown__wrap{
+        max-height: 574px
+      }
+    }
+    > span{
+      .el-input-number{
+        width:120px;
+        .el-input{
+          width: 100px;
+        }
+        .el-input__inner{
+          padding-left: 5px;
+          padding-right: 5px;
+          width: 88px;
+        }
+        .el-input-number__increase, .el-input-number__decrease {
+          background-color: inherit;
+          border: none;
+        }
+      }
+    }
+  }
+  .el-divider{
+    .el-divider--horizontal{
+      margin: 12px 0;
+    }
+  }
+  .toolbar{
+    z-index: 5;
+  }
+  .listpage-body{
+    height: calc(100% - 60px);
+    overflow-y: auto;
+    position: relative;
+    font-size: 1rem;
+    &::-webkit-scrollbar{
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      position: absolute;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      position: absolute;
+    }
+    .show-table{
+      height: 100%;
+      width: 100%;
+      .el-table::before{
+        height: 0px;
+      }
+      .el-table{
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        font-size: 1rem;
+      }
+      .el-table__body-wrapper{
+        height: 100%;
+        width: 100%;
+        &::-webkit-scrollbar{
+          width: 5px;
+          height: 1px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          position: absolute;
+        }
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          position: absolute;
+        }
+      }
+      .disableExpand div.el-table__expand-icon{
+        display: none;
+      }
+      .el-input{
+        width: 200px;
+      }
+      .el-table__body td,.el-table__body th{
+        border-bottom: 1px solid;
+      }
+      .el-table--enable-row-hover .el-table__body tr:hover>td{
+        transform: scale(1.02);
+      }
+      .el-table .highlight{
+        color: var(--highlight-color) !important;
+      }
+      .el-button{
+        font-size: 1rem;
+      }
+    }
+    .show-picture{
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      .card{
+        border-radius: 6px;
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+        transition: 0.2s;
+        &:hover {
+          top: -3px;
+        }
+        .img{
+          position: relative;
+          min-height: 40px;
+          img{
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+          }
+          .rate{
+            position: absolute;
+            top: 3%;
+            right: -40%;
+            width: 100%;
+            background-color: #111111aa;
+            color:#2f90b9;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            font-weight: bolder;
+            text-align: center;
+            transform: rotate(45deg);
+          }
+          .site{
+            position: absolute;
+            top: 0%;
+            left: 0%;
+            width: 100%;
+            background-color: #111111aa;
+            color:#2f90b9;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            font-weight: bolder;
+            text-align: center;
+          }
+          .progress{
+            position: absolute;
+            bottom: 10%;
+            left: 0%;
+            width: 40%;
+            background-color: #111111aa;
+            color: #f8df70;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            font-weight: bolder;
+            text-align: left;
+          }
+          .update{
+            position: absolute;
+            top: 5%;
+            left: -40%;
+            width: 100%;
+            background-color: #68b88e;
+            color: #cdcdcd;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            transform: rotate(-45deg);
+          }
+          .operate{
+            display: none;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-color: #111111aa;
+            width: 100%;
+            font-size: 13px;
+            .operate-wrap{
+              display: flex;
+              justify-content: space-between;
+              .o-play, .o-star, .o-share{
+                cursor: pointer;
+                display: inline-block;
+                width: 80px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                color: #cdcdcd;
+                &:hover{
+                  background-color: #111;
+                }
+              }
+            }
+          }
+        }
+        .name{
+          font-size: 16px;
+          padding: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .info{
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          padding: 10px;
+        }
+        &:hover{
+          .operate{
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+
 // loading
 .zy-loading{
   width: 100%;
@@ -226,4 +440,4 @@
       box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
     }
   }
-}
+}

src/assets/scss/theme.scss

@@ -1,6 +1,6 @@
 :root{
   // general
-  --highlight-color: #38dd77;
+  --highlight-color:#1677b3;
   // light
   --l-c-0: #823aa0;
   --l-c-1: #823aa011;
@@ -65,7 +65,7 @@
   --p-c-9: #f4f7f799;
   --p-fc-1: #ffffff;
   --p-fc-2: #FFFFF3;
-  --p-fc-3: #f15c5c;
+  --p-fc-3: #177ea7;
   --p-bgc-1: #ff8499;
   --p-bgc-2: #fea1b2;
   --p-bsc: 0 1px 3px #ef528533, 0 1px 2px #ef528544;

src/assets/scss/theme/dark.scss

@@ -24,6 +24,8 @@
       }
     }
     .vs-input{
+      color: var(--d-fc-1);
+      background-color: var(--d-bgc-1);
       input{
         color: var(--d-fc-1);
         &::-webkit-input-placeholder{
@@ -32,36 +34,11 @@
       }
     }
   }
-  .zy-checkbox{
+  .zy-input{
     color: var(--d-fc-1);
-    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-  }
-  .zy-table{
-    color: var(--d-fc-2);
-    .tHeader{
-      border-bottom-color: var(--d-c-3);
-      .btn{
-        &:hover{
-          color: var(--d-fc-3)
-        }
-      }
-    }
-    .tBody{
-      border-bottom-color: var(--d-c-3);
-      ul{
-        li{
-          border-bottom-color: var(--d-c-2);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--d-bsc-hover);
-          }
-          span{
-            &.btn:hover{
-              color: var(--d-fc-3)
-            }
-          }
-        }
-      }
+    background-color: var(--d-bgc-1);
+    input{
+      color: var(--d-fc-1);
     }
   }
   .zy-scroll{
@@ -154,23 +131,12 @@
                 border-color: var(--d-c-8);
               }
             }
-          }
-        }
-      }
-    }
-  }
-  .film{
-    .body{
-      background-color: var(--d-bgc-1);
-      box-shadow: var(--d-bsc);
-      .show-img{
-        color: var(--d-fc-1);
-        .card{
-          background-color: var(--d-bgc-1);
-          box-shadow: var(--d-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--d-bsc-hover);
+            .selected {
+              background-color: var(--d-c-5);
+              &:hover{
+                background-color: var(--d-c-5);
+              }
+            }
           }
         }
       }
@@ -179,6 +145,19 @@
   .play{
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
+    .el-switch__label {
+      color: var(--d-fc-2)
+    }
+    .el-switch__label.is-active {
+      color: #409EFF
+    }
+    .el-input{
+      input{
+        background-color: var(--d-bgc-1);
+        border: 1px solid var(--d-bgc-1);
+        color: var(--d-fc-2);
+      }
+    }
     .title{
       color: var(--d-fc-1);
       .right {
@@ -188,6 +167,21 @@
       }
     }
     .box{
+      .title{
+        .right{
+          color: var(--d-fc-2);
+          svg{
+            stroke: var(--d-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--d-c-8);
+              stroke-width: 1.5;
+              fill: var(--d-c-2);
+            }
+          }
+        }
+      }
       .more{
         span{
           svg{
@@ -247,6 +241,14 @@
             }
           }
         }
+        .list-channels{
+          .btn{
+            color: var(--d-fc-1);
+            &:hover{
+              text-decoration:underline;
+            }
+          }
+        }
         .list-history{
           li{
             .title{
@@ -275,10 +277,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--d-bgc-1);
-    box-shadow: var(--d-bsc);
-  }
   .setting{
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
@@ -344,4 +342,133 @@
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
   }
+
+  // Page of list using table and picture
+  .listpage{
+    color: var(--d-fc-2);
+    .listpage-header-divider{
+      background-color: var(--d-bgc-1);
+      .el-divider__text {
+        background-color: var(--d-bgc-2);
+      }
+      .el-button{
+        background-color: var(--d-bgc-2);
+        color: var(--d-fc-2);
+        &:hover{
+          color: var(--d-fc-3)
+        }
+      }
+    }
+    .listpage-header, .toolbar{
+      border-bottom-color: var(--d-c-3);
+      .btn{
+        &:hover{
+          color: var(--d-fc-3)
+        }
+      }
+      .el-switch__label {
+        color: var(--d-fc-2)
+      }
+      .el-switch__label.is-active {
+        color: #409EFF
+      }
+      .el-button{
+        background-color: var(--d-bgc-2);
+        color: var(--d-fc-2);
+        &:hover{
+          color: var(--d-fc-3)
+        }
+      }
+      .el-input{
+        input{
+          background-color: var(--d-bgc-1);
+          border: 1px solid var(--d-bgc-1);
+          color: var(--d-fc-2);
+        }
+      }
+      .el-input-group__prepend{
+        background-color: var(--d-bgc-1);
+      }
+      .popper {
+        color: var(--d-fc-1);
+        background-color: var(--d-bgc-1);
+        box-shadow: var(--d-bsc);
+        li {
+          color: var(--d-fc-1);
+          background-color: var(--d-bgc-1);
+          &:hover{
+            background-color: var(--d-bgc-2);
+          }
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--d-bgc-1);
+      }
+    }
+    .listpage-body{
+      color: var(--d-fc-1);
+      background-color: var(--d-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--d-bsc-scroll);
+          background: var(--d-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--d-bsc-scroll);
+          background: var(--d-bgc-1);
+        }
+      }
+      /* 设置el-table的样式*/
+      .show-table{
+        .el-table{
+          color: var(--d-fc-1);
+          background-color: var(--d-bgc-1);
+        }
+        .el-table__body-wrapper{
+          &:hover{
+            &::-webkit-scrollbar-thumb {
+              box-shadow: var(--d-bsc-scroll);
+              background: var(--d-c-5);
+            }
+            &::-webkit-scrollbar-track {
+              box-shadow: var(--d-bsc-scroll);
+              background: var(--d-bgc-1);
+            }
+          }
+        }
+       .el-input{
+          input{
+            background-color: var(--d-bgc-2);
+            border: 1px solid var(--d-bgc-2);
+            color: var(--d-fc-1);
+          }
+        }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--d-fc-1);
+          background-color: var(--d-bgc-1);
+          border-bottom-color: var(--d-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--d-bgc-2);
+        }
+        .el-button{
+          color: var(--d-fc-1);
+          &:hover{
+            color: var(--d-fc-3)
+          }
+        }
+      }
+      .show-picture{
+        color: var(--d-fc-1);
+        .card{
+          background-color: var(--d-bgc-1);
+          box-shadow: var(--d-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--d-bsc-hover);
+          }
+        }
+      }
+    }
+  }
 }

src/assets/scss/theme/green.scss

@@ -24,6 +24,8 @@
       }
     }
     .vs-input{
+      color: var(--g-fc-1);
+      background-color: var(--g-bgc-1);
       input{
         color: var(--g-fc-1);
         &::-webkit-input-placeholder{
@@ -32,35 +34,11 @@
       }
     }
   }
-  .zy-checkbox{
+  .zy-input{
     color: var(--g-fc-1);
-  }
-  .zy-table{
-    color: var(--g-fc-2);
-    .tHeader{
-      border-bottom-color: var(--g-c-3);
-      .btn{
-        &:hover{
-          color: var(--g-fc-3)
-        }
-      }
-    }
-    .tBody{
-      border-bottom-color: var(--g-c-3);
-      ul{
-        li{
-          border-bottom-color: var(--g-c-2);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--g-bsc-hover);
-          }
-          span{
-            &.btn:hover{
-              color: var(--g-fc-3)
-            }
-          }
-        }
-      }
+    background-color: var(--g-bgc-1);
+    input{
+      color: var(--g-fc-1);
     }
   }
   .zy-scroll{
@@ -153,23 +131,12 @@
                 border-color: var(--g-c-8);
               }
             }
-          }
-        }
-      }
-    }
-  }
-  .film{
-    .body{
-      background-color: var(--g-bgc-1);
-      box-shadow: var(--g-bsc);
-      .show-img{
-        color: var(--g-fc-1);
-        .card{
-          background-color: var(--g-bgc-1);
-          box-shadow: var(--g-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--g-bsc-hover);
+            .selected {
+              background-color: var(--g-c-5);
+              &:hover{
+                background-color: var(--g-c-5);
+              }
+            }
           }
         }
       }
@@ -178,6 +145,13 @@
   .play{
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
+    .el-input{
+      input{
+        background-color: var(--g-bgc-1);
+        border: 1px solid var(--g-bgc-1);
+        color: var(--g-fc-2);
+      }
+    }
     .title{
       color: var(--g-fc-1);
       .right {
@@ -187,6 +161,21 @@
       }
     }
     .box{
+      .title{
+        .right{
+          color: var(--g-fc-2);
+          svg{
+            stroke: var(--g-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--g-c-8);
+              stroke-width: 1.5;
+              fill: var(--g-c-2);
+            }
+          }
+        }
+      }
       .more{
         span{
           svg{
@@ -242,7 +231,15 @@
               color: var(--g-fc-3);
             }
             &:hover{
-              background-color: var(--d-c-3);
+              background-color: var(--g-c-3);
+            }
+          }
+        }
+        .list-channels{
+          .btn{
+            color: var(--g-fc-1);
+            &:hover{
+              text-decoration:underline;
             }
           }
         }
@@ -274,10 +271,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--g-bgc-1);
-    box-shadow: var(--g-bsc);
-  }
   .setting{
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
@@ -343,4 +336,127 @@
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
   }
+
+  // Page of list using table and picture
+  .listpage{
+    color: var(--g-fc-2);
+    .listpage-header-divider{
+      background-color: var(--g-bgc-1);
+      .el-divider__text {
+        background-color: var(--g-bgc-2);
+      }
+      .el-button{
+        background-color: var(--g-bgc-2);
+        color: var(--g-fc-2);
+        &:hover{
+          color: var(--g-fc-3)
+        }
+      }
+    }
+    .listpage-header, .toolbar{
+      border-bottom-color: var(--g-c-3);
+      .btn{
+        &:hover{
+          color: var(--g-fc-3)
+        }
+      }
+      .el-button{
+        background-color: var(--g-bgc-2);
+        color: var(--g-fc-2);
+        &:hover{
+          color: var(--g-fc-3)
+        }
+      }
+      .el-input{
+        input{
+          background-color: var(--g-bgc-1);
+          border: 1px solid var(--g-bgc-1);
+          color: var(--g-fc-2);
+        }
+      }
+      .el-input-group__prepend{
+        background-color: var(--g-bgc-1);
+      }
+      .popper {
+        color: var(--g-fc-1);
+        background-color: var(--g-bgc-1);
+        box-shadow: var(--g-bsc);
+        li {
+          color: var(--g-fc-1);
+          background-color: var(--g-bgc-1);
+          &:hover{
+            background-color: var(--g-bgc-2);
+          }
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--g-bgc-1);
+      }
+    }
+    .listpage-body{
+      color: var(--g-fc-1);
+      background-color: var(--g-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--g-bsc-scroll);
+          background: var(--g-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--g-bsc-scroll);
+          background: var(--g-bgc-1);
+        }
+      }
+      /* 设置el-table的样式*/
+      .show-table{
+        .el-table{
+          color: var(--g-fc-1);
+          background-color: var(--g-bgc-1);
+        }
+        .el-table__body-wrapper{
+          &:hover{
+            &::-webkit-scrollbar-thumb {
+              box-shadow: var(--g-bsc-scroll);
+              background: var(--g-c-5);
+            }
+            &::-webkit-scrollbar-track {
+              box-shadow: var(--g-bsc-scroll);
+              background: var(--g-bgc-1);
+            }
+          }
+        }
+       .el-input{
+          input{
+            background-color: var(--g-bgc-2);
+            border: 1px solid var(--g-bgc-2);
+            color: var(--g-fc-1);
+          }
+        }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--g-fc-1);
+          background-color: var(--g-bgc-1);
+          border-bottom-color: var(--g-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--g-bgc-2);
+        }
+        .el-button{
+          color: var(--g-fc-1);
+          &:hover{
+            color: var(--g-fc-3)
+          }
+        }
+      }
+      .show-picture{
+        color: var(--g-fc-1);
+        .card{
+          background-color: var(--g-bgc-1);
+          box-shadow: var(--g-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--g-bsc-hover);
+          }
+        }
+      }
+    }
+  }
 }

src/assets/scss/theme/light.scss

@@ -24,6 +24,8 @@
       }
     }
     .vs-input{
+      color: var(--l-fc-1);
+      background-color: var(--l-bgc-1);
       input{
         color: var(--l-fc-1);
         &::-webkit-input-placeholder{
@@ -32,35 +34,11 @@
       }
     }
   }
-  .zy-checkbox{
+  .zy-input{
     color: var(--l-fc-1);
-  }
-  .zy-table{
-    color: var(--l-fc-2);
-    .tHeader{
-      border-bottom-color: var(--l-c-3);
-      .btn{
-        &:hover{
-          color: var(--l-fc-3)
-        }
-      }
-    }
-    .tBody{
-      border-bottom-color: var(--l-c-3);
-      ul{
-        li{
-          border-bottom-color: var(--l-c-2);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--l-bsc-hover);
-          }
-          span{
-            &.btn:hover{
-              color: var(--l-fc-3)
-            }
-          }
-        }
-      }
+    background-color: var(--l-bgc-1);
+    input{
+      color: var(--l-fc-1);
     }
   }
   .zy-scroll{
@@ -153,23 +131,12 @@
                 border-color: var(--l-c-8);
               }
             }
-          }
-        }
-      }
-    }
-  }
-  .film{
-    .body{
-      background-color: var(--l-bgc-1);
-      box-shadow: var(--l-bsc);
-      .show-img{
-        color: var(--l-fc-1);
-        .card{
-          background-color: var(--l-bgc-1);
-          box-shadow: var(--l-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--l-bsc-hover);
+            .selected {
+              background-color: var(--l-c-5);
+              &:hover{
+                background-color: var(--l-c-5);
+              }
+            }
           }
         }
       }
@@ -178,6 +145,13 @@
   .play{
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
+    .el-input{
+      input{
+        background-color: var(--l-bgc-1);
+        border: 1px solid var(--l-bgc-1);
+        color: var(--l-fc-2);
+      }
+    }
     .title{
       color: var(--l-fc-1);
       .right {
@@ -187,6 +161,21 @@
       }
     }
     .box{
+      .title{
+        .right{
+          color: var(--l-fc-2);
+          svg{
+            stroke: var(--l-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--l-c-8);
+              stroke-width: 1.5;
+              fill: var(--l-c-2);
+            }
+          }
+        }
+      }
       .more{
         span{
           svg{
@@ -242,7 +231,15 @@
               color: var(--l-fc-3);
             }
             &:hover{
-              background-color: var(--d-c-3);
+              background-color: var(--l-c-3);
+            }
+          }
+        }
+        .list-channels{
+          .btn{
+            color: var(--l-fc-1);
+            &:hover{
+              text-decoration:underline;
             }
           }
         }
@@ -274,10 +271,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--l-bgc-1);
-    box-shadow: var(--l-bsc);
-  }
   .setting{
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
@@ -343,4 +336,127 @@
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
   }
+
+  // Page of list using table and picture
+  .listpage{
+    color: var(--l-fc-2);
+    .listpage-header-divider{
+      background-color: var(--l-bgc-1);
+      .el-divider__text {
+        background-color: var(--l-bgc-2);
+      }
+      .el-button{
+        background-color: var(--l-bgc-2);
+        color: var(--l-fc-2);
+        &:hover{
+          color: var(--l-fc-3)
+        }
+      }
+    }
+    .listpage-header, .toolbar{
+      border-bottom-color: var(--l-c-3);
+      .btn{
+        &:hover{
+          color: var(--l-fc-3)
+        }
+      }
+      .el-button{
+        background-color: var(--l-bgc-2);
+        color: var(--l-fc-2);
+        &:hover{
+          color: var(--l-fc-3)
+        }
+      }
+      .el-input{
+        input{
+          background-color: var(--l-bgc-1);
+          border: 1px solid var(--l-bgc-1);
+          color: var(--l-fc-2);
+        }
+      }
+      .el-input-group__prepend{
+        background-color: var(--l-bgc-1);
+      }
+      .popper {
+        color: var(--l-fc-1);
+        background-color: var(--l-bgc-1);
+        box-shadow: var(--l-bsc);
+        li {
+          color: var(--l-fc-1);
+          background-color: var(--l-bgc-1);
+          &:hover{
+            background-color: var(--l-bgc-2);
+          }
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--l-bgc-1);
+      }
+    }
+    .listpage-body{
+      color: var(--l-fc-1);
+      background-color: var(--l-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--l-bsc-scroll);
+          background: var(--l-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--l-bsc-scroll);
+          background: var(--l-bgc-1);
+        }
+      }
+      /* 设置el-table的样式*/
+      .show-table{
+        .el-table{
+          color: var(--l-fc-1);
+          background-color: var(--l-bgc-1);
+        }
+        .el-table__body-wrapper{
+          &:hover{
+            &::-webkit-scrollbar-thumb {
+              box-shadow: var(--l-bsc-scroll);
+              background: var(--l-c-5);
+            }
+            &::-webkit-scrollbar-track {
+              box-shadow: var(--l-bsc-scroll);
+              background: var(--l-bgc-1);
+            }
+          }
+        }
+       .el-input{
+          input{
+            background-color: var(--l-bgc-2);
+            border: 1px solid var(--l-bgc-2);
+            color: var(--l-fc-1);
+          }
+        }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--l-fc-1);
+          background-color: var(--l-bgc-1);
+          border-bottom-color: var(--l-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--l-bgc-2);
+        }
+        .el-button{
+          color: var(--l-fc-1);
+          &:hover{
+            color: var(--l-fc-3)
+          }
+        }
+      }
+      .show-picture{
+        color: var(--l-fc-1);
+        .card{
+          background-color: var(--l-bgc-1);
+          box-shadow: var(--l-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--l-bsc-hover);
+          }
+        }
+      }
+    }
+  }
 }

src/assets/scss/theme/pink.scss

@@ -24,6 +24,8 @@
       }
     }
     .vs-input{
+      color: var(--p-fc-1);
+      background-color: var(--p-bgc-1);
       input{
         color: var(--p-fc-1);
         &::-webkit-input-placeholder{
@@ -32,35 +34,11 @@
       }
     }
   }
-  .zy-checkbox{
+  .zy-input{
     color: var(--p-fc-1);
-  }
-  .zy-table{
-    color: var(--p-fc-2);
-    .tHeader{
-      border-bottom-color: var(--p-c-3);
-      .btn{
-        &:hover{
-          color: var(--p-fc-3)
-        }
-      }
-    }
-    .tBody{
-      border-bottom-color: var(--p-c-3);
-      ul{
-        li{
-          border-bottom-color: var(--p-c-2);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--p-bsc-hover);
-          }
-          span{
-            &.btn:hover{
-              color: var(--p-fc-3)
-            }
-          }
-        }
-      }
+    background-color: var(--p-bgc-1);
+    input{
+      color: var(--p-fc-1);
     }
   }
   .zy-scroll{
@@ -153,23 +131,12 @@
                 border-color: var(--p-c-8);
               }
             }
-          }
-        }
-      }
-    }
-  }
-  .film{
-    .body{
-      background-color: var(--p-bgc-1);
-      box-shadow: var(--p-bsc);
-      .show-img{
-        color: var(--p-fc-1);
-        .card{
-          background-color: var(--p-bgc-1);
-          box-shadow: var(--p-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--p-bsc-hover);
+            .selected {
+              background-color: var(--p-c-5);
+              &:hover{
+                background-color: var(--p-c-5);
+              }
+            }
           }
         }
       }
@@ -178,6 +145,13 @@
   .play{
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
+    .el-input{
+      input{
+        background-color: var(--p-bgc-1);
+        border: 1px solid var(--p-bgc-1);
+        color: var(--p-fc-2);
+      }
+    }
     .title{
       color: var(--p-fc-1);
       .right {
@@ -187,6 +161,21 @@
       }
     }
     .box{
+      .title{
+        .right{
+          color: var(--p-fc-2);
+          svg{
+            stroke: var(--p-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--p-c-8);
+              stroke-width: 1.5;
+              fill: var(--p-c-2);
+            }
+          }
+        }
+      }
       .more{
         span{
           svg{
@@ -242,7 +231,15 @@
               color: var(--p-fc-3);
             }
             &:hover{
-              background-color: var(--d-c-3);
+              background-color: var(--p-c-3);
+            }
+          }
+        }
+        .list-channels{
+          .btn{
+            color: var(--p-fc-1);
+            &:hover{
+              text-decoration:underline;
             }
           }
         }
@@ -274,10 +271,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--p-bgc-1);
-    box-shadow: var(--p-bsc);
-  }
   .setting{
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
@@ -343,4 +336,127 @@
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
   }
+
+  // Page of list using table and picture
+  .listpage{
+    color: var(--p-fc-2);
+    .listpage-header-divider{
+      background-color: var(--p-bgc-1);
+      .el-divider__text {
+        background-color: var(--p-bgc-2);
+      }
+      .el-button{
+        background-color: var(--p-bgc-2);
+        color: var(--p-fc-2);
+        &:hover{
+          color: var(--p-fc-3)
+        }
+      }
+    }
+    .listpage-header, .toolbar{
+      border-bottom-color: var(--p-c-3);
+      .btn{
+        &:hover{
+          color: var(--p-fc-3)
+        }
+      }
+      .el-button{
+        background-color: var(--p-bgc-2);
+        color: var(--p-fc-2);
+        &:hover{
+          color: var(--p-fc-3)
+        }
+      }
+      .el-input{
+        input{
+          background-color: var(--p-bgc-1);
+          border: 1px solid var(--p-bgc-1);
+          color: var(--p-fc-2);
+        }
+      }
+      .el-input-group__prepend{
+        background-color: var(--p-bgc-1);
+      }
+      .popper {
+        color: var(--p-fc-1);
+        background-color: var(--p-bgc-1);
+        box-shadow: var(--p-bsc);
+        li {
+          color: var(--p-fc-1);
+          background-color: var(--p-bgc-1);
+          &:hover{
+            background-color: var(--p-bgc-2);
+          }
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--p-bgc-1);
+      }
+    }
+    .listpage-body{
+      color: var(--p-fc-1);
+      background-color: var(--p-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--p-bsc-scroll);
+          background: var(--p-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--p-bsc-scroll);
+          background: var(--p-bgc-1);
+        }
+      }
+      /* 设置el-table的样式*/
+      .show-table{
+        .el-table{
+          color: var(--p-fc-1);
+          background-color: var(--p-bgc-1);
+        }
+        .el-table__body-wrapper{
+          &:hover{
+            &::-webkit-scrollbar-thumb {
+              box-shadow: var(--p-bsc-scroll);
+              background: var(--p-c-5);
+            }
+            &::-webkit-scrollbar-track {
+              box-shadow: var(--p-bsc-scroll);
+              background: var(--p-bgc-1);
+            }
+          }
+        }
+       .el-input{
+          input{
+            background-color: var(--p-bgc-2);
+            border: 1px solid var(--p-bgc-2);
+            color: var(--p-fc-1);
+          }
+        }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--p-fc-1);
+          background-color: var(--p-bgc-1);
+          border-bottom-color: var(--p-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--p-bgc-2);
+        }
+        .el-button{
+          color: var(--p-fc-1);
+          &:hover{
+            color: var(--p-fc-3)
+          }
+        }
+      }
+      .show-picture{
+        color: var(--p-fc-1);
+        .card{
+          background-color: var(--p-bgc-1);
+          box-shadow: var(--p-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--p-bsc-hover);
+          }
+        }
+      }
+    }
+  }
 }

src/background.js

@@ -1,16 +1,16 @@
 'use strict'
 
-import './lib/site/server'
-import { app, protocol, BrowserWindow, globalShortcut, ipcMain } from 'electron'
+import { app, protocol, BrowserWindow, globalShortcut } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import { initUpdater } from './lib/update/update'
 const isDevelopment = process.env.NODE_ENV !== 'production'
+// const log = require('electron-log') // 用于调试主程序
 
-// 允许跨域
-app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors')
+app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors') // 允许跨域
+app.commandLine.appendSwitch('--ignore-certificate-errors', 'true') // 忽略证书相关错误
 
 let win
-let mini
 
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
@@ -22,7 +22,9 @@ function createWindow () {
     resizable: true,
     webPreferences: {
       webSecurity: false,
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+      enableRemoteModule: true,
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      allowRunningInsecureContent: false
     }
   })
 
@@ -34,43 +36,36 @@ function createWindow () {
     win.loadURL('app://./index.html')
   }
 
+  // 修改request headers
+  // Sec-Fetch下禁止修改，浏览器自动加上请求头 https://www.cnblogs.com/fulu/p/13879080.html 暂时先用index.html的meta referer policy替代
+  const filter = {
+    urls: ['http://*/*', 'http://*/*']
+  }
+  win.webContents.session.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
+    const url = new URL(details.url)
+    details.requestHeaders.Origin = url.origin
+    if (!details.url.includes('//localhost') && details.requestHeaders.Referer && details.requestHeaders.Referer.includes('//localhost')) {
+      details.requestHeaders.Referer = url.origin
+    }
+    callback({ // https://github.com/electron/electron/issues/23988 回调似乎无法修改headers，暂时先用index.html的meta referer policy替代
+      cancel: false,
+      requestHeaders: details.requestHeaders
+    })
+  })
+
+  initUpdater(win)
+
   win.on('closed', () => {
     win = null
   })
 }
 
-function createMini () {
-  mini = new BrowserWindow({
-    width: 550,
-    miniWidth: 860,
-    height: 340,
-    miniHeight: 180,
-    frame: false,
-    resizable: true,
-    webPreferences: {
-      webSecurity: false,
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
-    }
-  })
-
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    mini.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'mini')
-    if (!process.env.IS_TEST) mini.webContents.openDevTools()
-  } else {
-    createProtocol('app')
-    mini.loadURL('app://./mini.html')
-  }
-
-  mini.on('closed', () => {
-    mini = null
-  })
-}
-
 if (process.platform === 'darwin') {
   app.dock.show()
 }
 if (process.platform === 'Linux') {
   app.disableHardwareAcceleration()
+  app.commandLine.appendSwitch('--no-sandbox') // linux 关闭沙盒模式
 }
 app.allowRendererProcessReuse = true
 
@@ -84,17 +79,6 @@ app.on('activate', () => {
   }
 })
 
-ipcMain.on('mini', () => {
-  createMini()
-  win.hide()
-})
-
-ipcMain.on('win', () => {
-  mini.destroy()
-  win.show()
-  win.webContents.send('miniClosed')
-})
-
 const gotTheLock = app.requestSingleInstanceLock()
 if (!gotTheLock) {
   app.quit()
@@ -118,9 +102,6 @@ if (!gotTheLock) {
       if (win) {
         win.isFocused() ? win.blur() : win.focus()
       }
-      if (mini) {
-        mini.isFocused() ? mini.blur() : mini.focus()
-      }
     })
   })
 }

src/components/Aside.vue

@@ -2,7 +2,7 @@
   <div class="aside">
     <span :class="[view === 'Film' ? 'active ': ''] + 'zy-svg'" @click="changeView('Film')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle">
-        <title id="apertureIconTitle">view</title>
+        <title id="apertureIconTitle">电影</title>
         <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
         <g stroke-linecap="round">
           <path d="M3 16H14.3164"></path>
@@ -14,15 +14,22 @@
         </g>
       </svg>
     </span>
+    <span :class="[view === 'Recommendation' ? 'active ': ''] + 'zy-svg'" @click="changeView('Recommendation')">
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="thumbUpIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6">
+      <title id="thumbUpIconTitle">影视推荐</title>
+      <path d="M8,8.73984815 C8,8.26242561 8.17078432,7.80075162 8.4814868,7.43826541 L13.2723931,1.84887469 C13.7000127,1.34998522 14.4122932,1.20614658 15,1.5 C15.5737957,1.78689785 15.849314,2.45205792 15.6464466,3.06066017 L14,8 L18.6035746,8 C18.7235578,8 18.8432976,8.01079693 18.9613454,8.03226018 C20.0480981,8.22985158 20.7689058,9.27101818 20.5713144,10.3577709 L19.2985871,17.3577709 C19.1256814,18.3087523 18.2974196,19 17.3308473,19 L10,19 C8.8954305,19 8,18.1045695 8,17 L8,8.73984815 Z"/>
+      <path d="M4,18 L4,9"/>
+      </svg>
+    </span>
     <span :class="[view === 'Play' ? 'active ': ''] + 'zy-svg'" @click="changeView('Play')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
-        <title id="playIconTitle">play</title>
+        <title id="playIconTitle">播放</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
     <span :class="[view === 'Star' ? 'active ': ''] + 'zy-svg'" @click="changeView('Star')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
-        <title id="favouriteIconTitle">star</title>
+        <title id="favouriteIconTitle">收藏</title>
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
@@ -35,7 +42,7 @@
     </span>
     <span :class="[view === 'Setting' ? 'active ': ''] + 'zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
-        <title id="settingsIconTitle">setting</title>
+        <title id="settingsIconTitle">设置</title>
         <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
         <circle cx="12" cy="12" r="1"></circle>
       </svg>
@@ -46,6 +53,12 @@
 import { mapMutations } from 'vuex'
 export default {
   name: 'Aside',
+  data () {
+    return {
+      lastViewOpenDetail: '',
+      savedDetail: {}
+    }
+  },
   computed: {
     view: {
       get () {
@@ -62,26 +75,24 @@ export default {
       set (val) {
         this.SET_DETAIL(val)
       }
-    },
-    editSites: {
-      get () {
-        return this.$store.getters.getEditSites
-      },
-      set (val) {
-        this.SET_EDITSITES(val)
-      }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_EDITSITES']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL']),
     changeView (e) {
-      this.view = e
-      // ChangeView 的时候关闭Detail和EditSites页面
-      this.detail = {
-        show: false
+      // 记录打开detail的view
+      if (this.detail.show === true) {
+        this.lastViewOpenDetail = this.view
+        this.savedDetail = this.detail
       }
-      this.editSites = {
-        show: false
+      this.view = e
+      // 如果回到上一次打开detail的试图页面,恢复detail页面
+      if (e === this.lastViewOpenDetail) {
+        this.detail = this.savedDetail
+      } else {
+        this.detail = {
+          show: false
+        }
       }
     }
   }

src/components/Detail.vue

@@ -4,7 +4,14 @@
       <div class="detail-header">
         <span class="detail-title">详情</span>
         <span class="detail-close zy-svg" @click="close">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
+          <svg
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            aria-labelledby="closeIconTitle"
+          >
             <title id="closeIconTitle">关闭</title>
             <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
           </svg>
@@ -29,16 +36,32 @@
           </div>
         </div>
         <div class="operate">
-          <span @click="playEvent(0)">播放</span>
+          <span @click="playEvent(selectedEpisode)">播放</span>
           <span @click="starEvent">收藏</span>
           <span @click="downloadEvent">下载</span>
           <span @click="shareEvent">分享</span>
           <span @click="doubanLinkEvent">豆瓣</span>
+          <span @click="togglePlayOnlineEvent">
+            <input type="checkbox" v-model="playOnline"> 播放在线高清视频
+          </span>
+          <span>
+            <select v-model="selectedOnlineSite" class="vs-options">
+              <option disabled value="">Please select one</option>
+              <option v-for="(i, j) in onlineSites" :key="j">{{i}}</option>
+            </select>
+          </span>
+        </div>
+        <div
+          class="desc" v-show="info.des">{{info.des}}
+        </div>
+        <div class="m3u8" v-if="videoFullList.length > 1">
+          <div class="box">
+            <span v-bind:class="{ selected: i.flag === videoFlag }" v-for="(i, j) in videoFullList" :key="j" @click="updateVideoList(i)">{{i.flag}}</span>
+          </div>
         </div>
-        <div class="desc" v-show="info.des">{{info.des}}</div>
         <div class="m3u8">
           <div class="box">
-            <span v-for="(i, j) in m3u8List" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
+            <span v-bind:class="{ selected: j === selectedEpisode }" v-for="(i, j) in videoList" :key="j" @click="playEvent(j)" @mouseenter="() => { selectedEpisode = j }">{{ i | ftName(j) }}</span>
           </div>
         </div>
       </div>
@@ -51,6 +74,7 @@
 <script>
 import { mapMutations } from 'vuex'
 import zy from '../lib/site/tools'
+import onlineVideo from '../lib/site/onlineVideo'
 import { star, history } from '../lib/dexie'
 const { clipboard } = require('electron')
 export default {
@@ -58,14 +82,24 @@ export default {
   data () {
     return {
       loading: true,
-      m3u8List: [],
-      info: {}
+      videoFlag: '',
+      videoList: [],
+      videoFullList: [],
+      info: {},
+      playOnline: false,
+      selectedEpisode: 0, // 选定集数
+      selectedOnlineSite: '哔嘀',
+      onlineSites: ['哔嘀', '素白白', '简影', '极品', '喜欢看', '1080影视']
     }
   },
   filters: {
-    ftName (e) {
-      const name = e.split('$')[0]
-      return name
+    ftName (e, n) {
+      const num = e.split('$')
+      if (num.length > 1) {
+        return e.split('$')[0]
+      } else {
+        return `第${(n + 1)}集`
+      }
     }
   },
   computed: {
@@ -100,164 +134,174 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL', 'SET_SHARE', 'SET_DetailCache']),
+    addClass (flag) {
+      if (flag === this.videoFlag) {
+        return 'selectedBox'
+      } else {
+        return 'box'
+      }
+    },
     close () {
       this.detail.show = false
     },
-    m3u8Parse (e) {
-      const dd = e.dl.dd
-      const type = Object.prototype.toString.call(dd)
-      if (type === '[object Array]') {
-        for (const i of dd) {
-          if (i._flag.indexOf('m3u8') >= 0) {
-            this.m3u8List = i._t.split('#')
-          }
-        }
-      } else {
-        this.m3u8List = dd._t.split('#')
+    async updateVideoList (e) {
+      this.videoFlag = e.flag
+      this.videoList = e.list
+      const db = await history.find({ site: this.detail.key, ids: this.detail.info.id })
+      if (db) {
+        const doc = { ...db }
+        doc.videoFlag = e.flag
+        delete doc.id
+        history.update(db.id, doc)
       }
     },
-    playEvent (n) {
-      history.find({ site: this.detail.key, ids: this.detail.info.id }).then(res => {
-        if (res) {
-          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: n, site: this.detail.site } }
+    async playEvent (n) {
+      if (!this.playOnline) {
+        const db = await history.find({ site: this.detail.key, ids: this.detail.info.id })
+        if (db) {
+          this.video = { key: db.site, info: { id: db.ids, name: db.name, index: n, site: this.detail.site, videoFlag: this.videoFlag } }
         } else {
-          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n, site: this.detail.site } }
+          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n, site: this.detail.site, videoFlag: this.videoFlag } }
         }
-      })
-
-      this.view = 'Play'
-      this.detail.show = false
-    },
-    starEvent () {
-      star.find({ key: this.detail.key, ids: this.info.id }).then(res => {
-        if (res) {
-          this.$message.info('该影片已被收藏')
+        this.video.detail = this.info
+        this.view = 'Play'
+        this.detail.show = false
+      } else {
+        const db = await history.find({ site: this.detail.key, ids: this.info.id })
+        if (db) {
+          db.index = n
+          db.detail = this.info
+          history.update(db.id, db)
         } else {
-          const docs = {
-            key: this.detail.key,
-            ids: this.info.id,
-            name: this.info.name,
-            type: this.info.type,
-            year: this.info.year,
-            last: this.info.last,
-            note: this.info.note
+          const doc = {
+            site: this.detail.key,
+            ids: this.detail.info.id,
+            name: this.detail.info.name,
+            type: this.detail.info.type,
+            year: this.detail.info.year,
+            index: n,
+            time: '',
+            detail: this.info
           }
-          star.add(docs).then(res => {
-            this.$message.success('收藏成功')
-          })
+          history.add(doc)
         }
-      }).catch(() => {
-        this.$message.warning('收藏失败')
-      })
+        onlineVideo.playVideoOnline(this.selectedOnlineSite, this.detail.info.name, n)
+      }
+    },
+    async starEvent () {
+      const db = await star.find({ key: this.detail.key, ids: this.info.id })
+      const doc = {
+        key: this.detail.key,
+        ids: this.info.id,
+        site: this.detail.site,
+        name: this.info.name,
+        detail: this.info,
+        rate: this.info.rate
+      }
+      if (db) {
+        star.update(db.id, doc)
+        this.$message.success('收藏更新成功')
+      } else {
+        star.add(doc).then(res => {
+          this.$message.success('收藏成功')
+        })
+      }
+    },
+    togglePlayOnlineEvent () {
+      this.playOnline = !this.playOnline
+    },
+    playVideoOnline (videoName, videoIndex) {
+      switch (this.selectedOnlineSite) {
+        case '哔嘀':
+          onlineVideo.playVideoOnBde4(videoName, videoIndex)
+          break
+        case '1080影视':
+          onlineVideo.playVideoOnK1080(videoName, videoIndex)
+          break
+        case '素白白':
+          onlineVideo.playVideoOnSubaibai(videoName, videoIndex)
+          break
+        case '哆咪动漫':
+          onlineVideo.playVideoOndmdm2020(videoName, videoIndex)
+          break
+        case '樱花动漫':
+          onlineVideo.playVideoOnYhdm(videoName, videoIndex)
+          break
+        case '简影':
+          onlineVideo.playVideoOnSyrme(videoName, videoIndex)
+          break
+        case '极品':
+          onlineVideo.playVideoOnJpysvip(videoName, videoIndex)
+          break
+        default:
+          this.$message.console.error(`不支持该网站：${this.selectedOnlineSite}`)
+      }
     },
     downloadEvent () {
-      zy.download(this.detail.key, this.info.id).then(res => {
-        if (res && res.dl && res.dl.dd) {
-          const text = res.dl.dd._t
-          if (text) {
-            const list = text.split('#')
-            let downloadUrl = res.name + '\n'
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-          } else {
-            this.$message.warning('没有查询到下载链接.')
-          }
-        } else {
-          const list = [...this.m3u8List]
-          let downloadUrl = this.detail.info.name + '\n'
-          for (const i of list) {
-            const url = encodeURI(i.split('$')[1])
-            downloadUrl += (url + '\n')
-          }
-          clipboard.writeText(downloadUrl)
-          this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-        }
+      zy.download(this.detail.key, this.info.id, this.videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
     shareEvent () {
       this.share = {
         show: true,
         key: this.detail.key,
-        info: this.detail.info
+        info: this.info,
+        index: this.selectedEpisode
       }
     },
     doubanLinkEvent () {
-      const open = require('open')
-      const axios = require('axios')
-      const cheerio = require('cheerio')
-      const name = this.detail.info.name.trim()
-      // 豆瓣搜索链接
-      var doubanSearchLink = 'https://www.douban.com/search?q=' + name
-      var link = doubanSearchLink
-      axios.get(doubanSearchLink).then(res => {
-        const $ = cheerio.load(res.data)
-        // 比较第一和第二豆瓣搜索结果, 如果名字相符， 就打开该链接，否则打开搜索页面
-        var nameInDouban = $($('div.result')[0]).find('div>div>h3>a').first()
-        if (name.replace(/\s/g, '') === nameInDouban.text().replace(/\s/g, '')) {
-          link = nameInDouban.attr('href')
-        } else {
-          nameInDouban = $($('div.result')[1]).find('div>div>h3>a').first()
-          if (name.replace(/\s/g, '') === nameInDouban.text().replace(/\s/g, '')) {
-            link = nameInDouban.attr('href')
-          }
-        }
+      const name = this.info.name.trim()
+      const year = this.info.year
+      zy.doubanLink(name, year).then(link => {
+        const open = require('open')
         open(link)
       })
     },
-    getDoubanRate () {
-      const axios = require('axios')
-      const cheerio = require('cheerio')
-      const name = this.detail.info.name.trim()
-      // 豆瓣搜索链接
-      var doubanSearchLink = 'https://www.douban.com/search?q=' + name
-      axios.get(doubanSearchLink).then(res => {
-        const $ = cheerio.load(res.data)
-        // 比较第一和第二给豆瓣搜索结果, 看名字是否相符
-        var link = ''
-        var nameInDouban = $($('div.result')[0]).find('div>div>h3>a').first()
-        if (name.replace(/\s/g, '') === nameInDouban.text().replace(/\s/g, '')) {
-          link = nameInDouban.attr('href')
-        } else {
-          nameInDouban = $($('div.result')[1]).find('div>div>h3>a').first()
-          if (name.replace(/\s/g, '') === nameInDouban.text().replace(/\s/g, '')) {
-            link = nameInDouban.attr('href')
-          }
-        }
-        // 如果找到链接，就打开该链接获取评分
-        if (link) {
-          axios.get(link).then(response => {
-            const parsedHtml = cheerio.load(response.data)
-            var rating = parsedHtml('body').find('#interest_sectl').first().find('strong').first()
-            if (rating.text()) {
-              this.info.rate = rating.text()
-            } else {
-              this.info.rate = '暂无评分'
-            }
-          })
-        } else {
-          this.info.rate = '暂无评分'
-        }
-      })
+    async getDoubanRate () {
+      const name = this.info.name.trim()
+      const year = this.info.year
+      this.info.rate = await zy.doubanRate(name, year)
     },
-    getDetailInfo () {
+    async getDetailInfo () {
       const id = this.detail.info.ids || this.detail.info.id
-      zy.detail(this.detail.key, id).then(res => {
-        if (res) {
-          this.info = res
-          this.$set(this.info, 'rate', '')
-          this.m3u8Parse(res)
-          this.getDoubanRate()
-          this.loading = false
+      const cacheKey = this.detail.key + '@' + id
+      const db = await history.find({ site: this.detail.key, ids: id })
+      if (db) {
+        this.videoFlag = db.videoFlag
+        this.selectedEpisode = db.index
+      }
+      if (!this.DetailCache[cacheKey]) {
+        this.DetailCache[cacheKey] = await zy.detail(this.detail.key, id)
+      }
+      const res = this.DetailCache[cacheKey]
+      if (res) {
+        this.info = res
+        this.$set(this.info, 'rate', this.DetailCache[cacheKey].rate || '')
+        this.videoFlag = this.videoFlag || res.fullList[0].flag
+        this.videoList = res.fullList[0].list
+        this.videoFullList = res.fullList
+        this.loading = false
+        if (!this.info.rate) {
+          await this.getDoubanRate()
+          this.DetailCache[cacheKey].rate = this.info.rate
         }
-      })
+      }
     }
   },
   created () {
@@ -266,7 +310,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.detail{
+.detail {
   position: absolute;
   left: 80px;
   right: 20px;
@@ -274,28 +318,28 @@ export default {
   width: calc(100% - 100px);
   height: calc(100% - 40px);
   z-index: 888;
-  .detail-content{
+  .detail-content {
     height: calc(100% - 10px);
     padding: 0 60px;
     position: relative;
-    .detail-header{
+    .detail-header {
       width: 100%;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .detail-title{
+      .detail-title {
         font-size: 16px;
       }
-      .detail-close{
+      .detail-close {
         cursor: pointer;
       }
     }
   }
-  .detail-body{
+  .detail-body {
     height: calc(100% - 50px);
     overflow-y: auto;
-    .info{
+    .info {
       width: 100%;
       padding: 10px;
       display: flex;
@@ -306,47 +350,54 @@ export default {
       border-radius: 2px;
       margin-bottom: 10px;
       height: auto;
-      .info-left{
+      .info-left {
         width: 200px;
         height: 100%;
-        img{
+        img {
           width: 100%;
           height: auto;
         }
       }
-      .info-right{
+      .info-right {
         flex: 1;
         margin-left: 20px;
-        .name{
+        .name {
           font-size: 20px;
           margin-bottom: 10px;
           font-weight: bold;
         }
-        .director, .actor, .type, .area, .lang, .year, .last, .note{
+        .director,
+        .actor,
+        .type,
+        .area,
+        .lang,
+        .year,
+        .last,
+        .note {
           font-size: 14px;
           line-height: 26px;
         }
-        .rate{
+        .rate {
           font-size: 16px;
           line-height: 26px;
           font-weight: bolder;
         }
       }
     }
-    .operate{
+    .operate {
       border: 1px solid;
       padding: 10px;
       width: 100%;
       margin-bottom: 10px;
       border-radius: 2px;
-      span{
+      span {
         margin-right: 20px;
         font-size: 14px;
         cursor: pointer;
         user-select: none;
       }
     }
-    .desc{
+    .desc {
       border: 1px solid;
       padding: 10px;
       width: 100%;
@@ -355,15 +406,24 @@ export default {
       font-size: 14px;
       line-height: 20px;
     }
-    .m3u8{
+    .m3u8 {
       border: 1px solid;
       padding: 10px 0 10px 10px;
       width: 100%;
       margin-bottom: 10px;
       border-radius: 2px;
-      .box{
+      .box {
         width: 100%;
-        span{
+        span {
+          display: inline-block;
+          font-size: 12px;
+          border: 1px solid;
+          border-radius: 2px;
+          cursor: pointer;
+          margin: 6px 10px 0px 0px;
+          padding: 8px 22px;
+        }
+        .selected {
           display: inline-block;
           font-size: 12px;
           border: 1px solid;
@@ -375,7 +435,7 @@ export default {
       }
     }
   }
-  .detail-mask{
+  .detail-mask {
     position: absolute;
     top: 50px;
     left: 0;
@@ -397,28 +457,37 @@ export default {
     @keyframes load4 {
       0%,
       100% {
-        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
       }
       12.5% {
-        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
       }
       25% {
-        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
       }
       37.5% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
+          0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
       }
       50% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
+          0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
       }
       62.5% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
       }
       75% {
-        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
+          2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
+          -2em -2em 0 0;
       }
       87.5% {
-        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
       }
     }
   }

src/components/EditSites.vue

@@ -1,88 +1,166 @@
 <template>
-  <div class="detail">
-    <div class="detail-content">
-      <div class="detail-header">
-        <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="openAddSite">添加新源</div>
-        </div>
-        <span class="detail-close zy-svg" @click="close">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
-            <title id="closeIconTitle">关闭</title>
-            <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
-          </svg>
+  <div class="listpage" id="sites">
+    <div class="listpage-header" v-show="!enableBatchEdit">
+          <el-switch v-model="enableBatchEdit" active-text="批处理分组">></el-switch>
+          <el-checkbox v-model="setting.excludeR18Films" @change="excludeR18FilmsChangeEvent">屏蔽福利片</el-checkbox>
+          <el-button @click="addSite" icon="el-icon-document-add">新增</el-button>
+          <el-button @click="exportSites" icon="el-icon-upload2" title="导出全部，自动添加扩展名">导出</el-button>
+          <el-button @click="importSites" icon="el-icon-download" title="支持同时导入多个文件">导入</el-button>
+          <el-button @click="checkAllSite" icon="el-icon-refresh" :loading="checkAllSitesLoading" title="可在后台运行">检测{{ this.checkAllSitesLoading ? this.checkProgress + '/' + this.sites.length : '' }}</el-button>
+          <el-button @click="resetSitesEvent" icon="el-icon-refresh-left">重置</el-button>
+    </div>
+    <div class="listpage-header" v-show="enableBatchEdit">
+          <el-switch v-model="enableBatchEdit" active-text="批处理分组"></el-switch>
+          <el-input placeholder="新组名" v-model="batchGroupName"></el-input>
+          <el-switch v-model="batchIsActive" active-text="启用"></el-switch>
+          <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit" title="输入框组名为空时仅保存开关状态">保存分组与开关状态</el-button>
+          <el-button @click="removeSelectedSites" icon="el-icon-delete-solid">删除</el-button>
+    </div>
+    <div class="listpage-body" id="sites-body">
+      <div class="show-table" id="sites-table">
+        <el-table size="mini" fit height="100%" row-key="id"
+          ref="editSitesTable"
+          :data="sites"
+          @select="selectionCellClick"
+          @selection-change="handleSelectionChange"
+          @sort-change="handleSortChange">
+          <el-table-column
+            type="selection"
+            v-if="enableBatchEdit">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="资源名">
+          </el-table-column>
+          <el-table-column
+            prop="isActive"
+            width="120"
+            :filters = "[{text:'启用', value: true}, {text:'停用', value: false}]"
+            :filter-method="(value, row) => value === row.isActive"
+            label="启用">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.isActive"
+                @click.native.stop='isActiveChangeEvent(scope.row)'>
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="group"
+            label="分组"
+            :filters="getFilters"
+            :filter-method="(value, row) => value === row.group"
+            filter-placement="bottom-end">
+          </el-table-column>
+          <el-table-column
+            label="状态"
+            sortable
+            :sort-by="['status']"
+            width="120">
+            <template slot-scope="scope">
+              <span v-if="scope.row.status === ' '">
+                <i class="el-icon-loading"></i>
+                检测中...
+              </span>
+              <span v-else>{{scope.row.status}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            header-align="center"
+            align="right"
+            :width="sites.every(site => site.status) && !checkAllSitesLoading ? 200 : 150">
+            <template slot-scope="scope">
+              <el-button size="mini" @click.stop="moveToTopEvent(scope.row)" type="text">置顶</el-button>
+              <el-button size="mini" @click.stop="editSite(scope.row)" type="text">编辑</el-button>
+              <!-- 检测时先强制批量检测一遍，如果不强制直接单个检测时第一次不会显示“检测中” -->
+              <el-button size="mini" v-if="sites.every(site => site.status)" v-show="!checkAllSitesLoading" @click.stop="checkSingleSite(scope.row)" type="text">检测</el-button>
+              <el-button size="mini" @click.stop="removeEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+     </div>
+    <!-- 编辑页面 -->
+    <div>
+      <el-dialog :visible.sync="dialogVisible" v-if='dialogVisible' :title="dialogType==='edit'?'编辑源':'新增源'" :append-to-body="true" @close="closeDialog">
+        <el-form :model="siteInfo" ref='siteInfo' label-width="75px" label-position="left" :rules="rules">
+          <el-form-item label="源站名" prop='name'>
+            <el-input v-model="siteInfo.name" placeholder="请输入源站名" />
+          </el-form-item>
+          <el-form-item label="API接口" prop='api'>
+            <el-input v-model="siteInfo.api" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入API接口地址"/>
+          </el-form-item>
+          <el-form-item label="下载接口" prop='download'>
+            <el-input v-model="siteInfo.download" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入Download接口地址，可以空着"/>
+          </el-form-item>
+          <el-form-item label="解析接口" prop='jiexiUrl'>
+            <el-input v-model="siteInfo.jiexiUrl" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入解析接口地址，默认源自带解析,若要调用应用默认解析接口请输入默认或default"/>
+          </el-form-item>
+          <el-form-item label="分组" prop='group'>
+            <el-select v-model="siteInfo.group" allow-create filterable default-first-option placeholder="请输入分组">
+              <el-option v-for="item in siteGroup" :key="item" :label="item" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="源站标识" prop='key'>
+            <el-input v-model="siteInfo.key" placeholder="请输入源站标识，如果为空，系统则自动生成" />
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="addOrEditSite">保存</el-button>
         </span>
-      </div>
-      <div class="detail-body zy-scroll">
-        <div class="zy-table">
-          <div class="tBody zy-scroll">
-            <div class="addSites-box zy-scroll" v-show="showAddSite">
-              <ul>
-                <li >
-                  <span class="name">源名称</span>
-                  <span class="name">API接口</span>
-                  <span class="name">DOWNLOAD接口</span>
-                  <span class="operate">
-                    <span class="btn"></span>
-                    <span class="btn"></span>
-                  </span>
-                 </li>
-                 <li>
-                  <span class="name" style="display:inline-block;vertical-align:middle">
-                    <input style="height: 30px" v-model="newSite.name">
-                  </span>
-                  <span class="name" style="display:inline-block;vertical-align:middle">
-                    <input style="height: 30px" v-model="newSite.api">
-                  </span>
-                   <span class="name" style="display:inline-block;vertical-align:middle">
-                     <input style="height: 30px" v-model="newSite.download" placeholder="可以为空">
-                   </span>
-                  <span class="operate">
-                    <span class="btn" @click="addNewSite">添加</span>
-                    <span class="btn" @click="closeAddSite">关闭</span>
-                  </span>
-                 </li>
-                 <li ></li>
-               </ul>
-             </div>
-            <ul>
-              <draggable v-model="sites" @change="listUpdatedEvent">
-                <transition-group>
-                  <li v-for="(i, j) in sites" :key="j">
-                    <span class="name">{{i.name}}</span>
-                    <span class="operate">
-                      <span class="btn" @click.stop="removeEvent(i)">删除</span>
-                    </span>
-                  </li>
-                </transition-group>
-              </draggable>
-            </ul>
-          </div>
-        </div>
-      </div>
+      </el-dialog>
     </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { sites } from '../lib/dexie'
-import draggable from 'vuedraggable'
+import { sites, setting } from '../lib/dexie'
+import zy from '../lib/site/tools'
+import { remote } from 'electron'
+import fs from 'fs'
+import Sortable from 'sortablejs'
+
 export default {
   name: 'editSites',
   data () {
     return {
       show: false,
       sites: [],
-      showAddSite: false,
-      newSite: {
+      dialogType: 'new',
+      dialogVisible: false,
+      siteInfo: {
+        key: '',
         name: '',
         api: '',
-        download: ''
-      }
+        download: '',
+        jiexiUrl: '',
+        group: '',
+        isActive: true
+      },
+      siteGroup: [],
+      rules: {
+        name: [
+          { required: true, message: '源站名不能为空', trigger: 'blur' }
+        ],
+        api: [
+          { required: true, message: 'API地址不能为空', trigger: 'blur' }
+        ]
+      },
+      enableBatchEdit: false,
+      batchGroupName: '',
+      batchIsActive: true,
+      shiftDown: false,
+      selectionBegin: '',
+      selectionEnd: '',
+      multipleSelection: [],
+      checkAllSitesLoading: false,
+      checkProgress: 0,
+      stopFlag: false,
+      editOldkey: ''
     }
   },
-  components: {
-    draggable
-  },
   computed: {
     setting: {
       get () {
@@ -92,109 +170,361 @@ export default {
         this.SET_SETTING(val)
       }
     },
-    editSites: {
-      get () {
-        return this.$store.getters.getEditSites
-      },
-      set (val) {
-        this.SET_EDITSITES(val)
+    getFilters () {
+      const groups = [...new Set(this.sites.map(site => site.group))]
+      const filters = []
+      groups.forEach(g => {
+        const doc = {
+          text: g,
+          value: g
+        }
+        filters.push(doc)
+      })
+      return filters
+    }
+  },
+  watch: {
+    enableBatchEdit () {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        this.enableBatchEdit = false
+      }
+      if (this.enableBatchEdit) {
+        if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+        if (this.setting.shiftTooltipLimitTimes) {
+          this.$message.info('多选时支持shift快捷键')
+          this.setting.shiftTooltipLimitTimes--
+          setting.find().then(res => {
+            res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+            setting.update(res)
+          })
+        }
       }
     }
   },
   methods: {
-    ...mapMutations(['SET_SETTING', 'SET_EDITSITES']),
-    close () {
-      this.editSites.show = false
+    ...mapMutations(['SET_SETTING']),
+    excludeR18FilmsChangeEvent () {
+      setting.find().then(res => {
+        res.excludeR18Films = this.setting.excludeR18Films
+        setting.update(res)
+      })
+    },
+    selectionCellClick (selection, row) {
+      if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) {
+        this.selectionEnd = row.id
+        const start = this.sites.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd))
+        const end = this.sites.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd))
+        const selections = this.sites.slice(start, end + 1)
+        this.$nextTick(() => {
+          selections.forEach(e => this.$refs.editSitesTable.toggleRowSelection(e, true))
+        })
+        this.selectionBegin = this.selectionEnd = ''
+        return
+      }
+      if (selection.includes(row)) {
+        this.selectionBegin = row.id
+      } else {
+        this.selectionBegin = ''
+      }
+    },
+    handleSelectionChange (rows) {
+      this.multipleSelection = rows
+    },
+    handleSortChange (column, prop, order) {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      this.updateDatabase(this.sites)
+    },
+    saveBatchEdit () {
+      this.multipleSelection.forEach(ele => {
+        if (this.batchGroupName) {
+          ele.group = this.batchGroupName
+        }
+        ele.isActive = this.batchIsActive
+      })
+      this.updateDatabase()
     },
     getSites () {
       sites.all().then(res => {
         this.sites = res
       })
     },
+    getSitesGroup () {
+      const arr = []
+      for (const i of this.sites) {
+        if (arr.indexOf(i.group) < 0) {
+          arr.push(i.group)
+        }
+      }
+      this.siteGroup = arr
+    },
+    addSite () {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      this.getSitesGroup()
+      this.dialogType = 'new'
+      this.dialogVisible = true
+      this.siteInfo = {
+        key: '',
+        name: '',
+        api: '',
+        download: '',
+        jiexiUrl: '',
+        group: '',
+        isActive: true
+      }
+    },
+    editSite (siteInfo) {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      this.getSitesGroup()
+      this.dialogType = 'edit'
+      this.dialogVisible = true
+      this.siteInfo = siteInfo
+      this.editOldkey = siteInfo.key
+    },
+    closeDialog () {
+      this.dialogVisible = false
+      this.getSites()
+    },
     removeEvent (e) {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
       sites.remove(e.id).then(res => {
         this.getSites()
       }).catch(err => {
         this.$message.warning('删除源失败, 错误信息: ' + err)
       })
     },
-    listUpdatedEvent () {
-      sites.clear().then(res1 => {
-        // 重新排序
-        var id = 1
-        this.sites.forEach(element => {
-          element.id = id
-          sites.add(element)
-          id += 1
-        })
-      })
+    checkSiteKey (e) {
+      if (this.dialogType === 'edit' && this.editOldkey === this.siteInfo.key) {
+        return true
+      } else {
+        for (const i of this.sites) {
+          if (i.key === this.siteInfo.key) {
+            this.$message.warning(`源站标识: ${i.key} 已存在, 请勿重复填写.`)
+            return false
+          }
+        }
+        return true
+      }
     },
-    openAddSite () {
-      this.showAddSite = true
-    },
-    closeAddSite () {
-      this.showAddSite = false
-    },
-    addNewSite () {
-      if (!this.newSite.name || !this.newSite.api) {
+    addOrEditSite () {
+      if (!this.siteInfo.name || !this.siteInfo.api) {
         this.$message.error('名称和API接口不能为空。')
-        return
+        return false
       }
-      var randomstring = require('randomstring')
-      var doc = {
-        key: randomstring.generate(6),
-        id: this.sites[this.sites.length - 1].id + 1,
-        name: this.newSite.name,
-        api: this.newSite.api,
-        download: this.newSite.download
+      if (!this.checkSiteKey()) {
+        return false
       }
+      const randomstring = require('randomstring')
+      const doc = {
+        key: this.dialogType === 'edit' ? this.siteInfo.key : this.siteInfo.key ? this.siteInfo.key : randomstring.generate(6),
+        id: this.dialogType === 'edit' ? this.siteInfo.id : this.sites.length ? this.sites[this.sites.length - 1].id + 1 : 1,
+        name: this.siteInfo.name,
+        api: this.siteInfo.api,
+        download: this.siteInfo.download,
+        jiexiUrl: this.siteInfo.jiexiUrl,
+        group: this.siteInfo.group,
+        isActive: this.siteInfo.isActive
+      }
+      if (this.dialogType === 'edit') sites.remove(this.siteInfo.id)
       sites.add(doc).then(res => {
-        this.newSite = {
+        this.siteInfo = {
+          key: '',
           name: '',
           api: '',
-          download: ''
+          download: '',
+          jiexiUrl: '',
+          group: ''
         }
-        this.$message.success('添加新源成功！')
+        this.dialogType === 'edit' ? this.$message.success('修改成功！') : this.$message.success('新增源成功！')
+        this.dialogVisible = false
         this.getSites()
       })
+      this.editOldkey = ''
+    },
+    exportSites () {
+      this.getSites()
+      const arr = [...this.sites]
+      const str = JSON.stringify(arr, null, 2)
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] }
+        ]
+      }
+      remote.dialog.showSaveDialog(options).then(result => {
+        if (!result.canceled) {
+          if (!result.filePath.endsWith('.json')) result.filePath += '.json'
+          fs.writeFileSync(result.filePath, str)
+          this.$message.success('已保存成功')
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    importSites () {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] }
+        ],
+        properties: ['openFile', 'multiSelections']
+      }
+      remote.dialog.showOpenDialog(options).then(result => {
+        if (!result.canceled) {
+          result.filePaths.forEach(file => {
+            const str = fs.readFileSync(file)
+            const json = JSON.parse(str)
+            json.forEach(ele => {
+              if (ele.api && this.sites.filter(x => x.key === ele.key).length === 0 && this.sites.filter(x => x.name === ele.name && x.api === ele.api).length === 0) {
+                // 不含该key 同时也不含名字和url一样的
+                if (ele.isActive === undefined) {
+                  ele.isActive = true
+                }
+                if (ele.group === undefined) {
+                  ele.group = '导入'
+                }
+                this.sites.push(ele)
+              }
+            })
+            this.resetId(this.sites)
+            sites.clear().then(sites.bulkAdd(this.sites))
+            this.$message.success('导入成功')
+            this.getSites()
+          })
+        }
+      })
+    },
+    resetSitesEvent () {
+      let url = this.setting.sitesDataURL
+      if (!url) {
+        // 如果没有设置源站文件链接,使用默认的gitee源
+        url = 'https://gitee.com/cuiocean/ZY-Player-Resources/raw/main/Sites/Sites.json'
+      }
+      const axios = require('axios')
+      axios.get(url).then(res => {
+        if (res.status === 200) {
+          if (res.data.length > 0) {
+            sites.clear().then(sites.bulkAdd(res.data))
+            this.$message.success('重置源成功')
+            this.getSites()
+          }
+        }
+      }).catch(error => {
+        this.$message.error('导入云端源站失败. ' + error)
+      })
+    },
+    moveToTopEvent (i) {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      this.sites.sort(function (x, y) { return x.key === i.key ? -1 : y.key === i.key ? 1 : 0 })
+      this.updateDatabase()
+    },
+    syncTableData () {
+      if (this.$refs.editSitesTable.tableData && this.$refs.editSitesTable.tableData.length === this.sites.length) {
+        this.sites = this.$refs.editSitesTable.tableData
+      }
+    },
+    isActiveChangeEvent (row) {
+      sites.remove(row.id)
+      sites.add(row)
+    },
+    resetId (inArray) {
+      let id = 1
+      inArray.forEach(ele => {
+        ele.id = id
+        id += 1
+      })
+    },
+    updateDatabase () {
+      // 因为el-table的数据是单向绑定,我们先同步el-table里的数据和其绑定的数据
+      this.syncTableData()
+      sites.clear().then(res => {
+        let id = 1
+        this.sites.forEach(ele => {
+          ele.id = id
+          id += 1
+        })
+        sites.bulkAdd(this.sites).then(this.getSites())
+      })
+    },
+    removeSelectedSites () {
+      this.multipleSelection.forEach(e => sites.remove(e.id))
+      this.$refs.editSitesTable.clearFilter()
+      this.getSites()
+      this.updateDatabase()
+      this.enableBatchEdit = false
+    },
+    rowDrop () {
+      if (this.checkAllSitesLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      const tbody = document.getElementById('sites-table').querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd ({ newIndex, oldIndex }) {
+          const currRow = _this.sites.splice(oldIndex, 1)[0]
+          _this.sites.splice(newIndex, 0, currRow)
+          _this.updateDatabase()
+        }
+      })
+    },
+    async checkAllSite () {
+      if (this.checkAllSitesLoading) return
+      this.checkAllSitesLoading = true
+      this.stopFlag = false
+      this.checkProgress = 0
+      const uncheckedList = this.sites.filter(e => e.status === undefined || e.status === ' ') // 未检测过的优先
+      const other = this.sites.filter(e => !uncheckedList.includes(e))
+      await Promise.all(uncheckedList.map(site => this.checkSingleSite(site)))
+      await Promise.all(other.map(site => this.checkSingleSite(site))).then(res => {
+        this.checkAllSitesLoading = false
+        this.getSites()
+        if (!this.stopFlag) this.$message.success('视频点播源站批量检测已完成！')
+      })
+    },
+    async checkSingleSite (row) {
+      row.status = ' '
+      if (this.stopFlag) {
+        this.checkProgress += 1
+        return row.status
+      }
+      const flag = await zy.check(row.key)
+      this.checkProgress += 1
+      if (flag) {
+        row.status = '可用'
+      } else {
+        row.status = '失效'
+        row.isActive = false
+      }
+      sites.remove(row.id)
+      sites.add(row)
+      return row.status
     }
   },
+  mounted () {
+    this.rowDrop()
+    addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true })
+    addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false })
+  },
   created () {
     this.getSites()
   }
 }
-
 </script>
-<style lang="scss" scoped>
-.detail{
-  position: absolute;
-  left: 80px;
-  right: 20px;
-  bottom: 0;
-  width: calc(100% - 100px);
-  height: calc(100% - 40px);
-  z-index: 888;
-  .detail-content{
-    height: calc(100% - 10px);
-    padding: 0 60px;
-    position: relative;
-    .detail-header{
-      width: 100%;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .detail-title{
-        font-size: 16px;
-      }
-      .detail-close{
-        cursor: pointer;
-      }
-    }
-  }
-  .detail-body{
-    height: calc(100% - 50px);
-    overflow-y: auto;
-  }
-}
-</style>

src/components/Frame.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="frame">
     <span class="top" @click="frameClickEvent('top')" title="置顶">
-      <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:10px;height:14px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"></path></svg>
+      <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:10px;height:14px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="appState.windowIsOnTop ? '#555555' : '#ffffff'"></path></svg>
     </span>
     <span class="min" @click="frameClickEvent('min')" title="最小化">
       <svg t="1595917239849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1155" style="width:8px;height:14px"><path d="M0 479.936C0 444.64 28.448 416 64.064 416L959.936 416C995.328 416 1024 444.736 1024 479.936L1024 544.064C1024 579.392 995.552 608 959.936 608L64.064 608C28.672 608 0 579.264 0 544.064L0 479.936Z" p-id="1156" fill="#ffffff"></path></svg>
@@ -18,10 +18,14 @@
 const { remote } = require('electron')
 export default {
   name: 'frame',
-  data () {
-    const win = remote.getCurrentWindow()
-    return {
-      isAlwaysOnTop: win.isAlwaysOnTop()
+  computed: {
+    appState: {
+      get () {
+        return this.$store.getters.getAppState
+      },
+      set (val) {
+        this.SET_APPSTATE(val)
+      }
     }
   },
   methods: {
@@ -37,8 +41,8 @@ export default {
         win.destroy()
       }
       if (e === 'top') {
-        this.isAlwaysOnTop = !this.isAlwaysOnTop
-        win.setAlwaysOnTop(this.isAlwaysOnTop)
+        this.appState.windowIsOnTop = !this.appState.windowIsOnTop
+        win.setAlwaysOnTop(this.appState.windowIsOnTop)
       }
     }
   }

src/components/History.vue

@@ -1,54 +1,136 @@
 <template>
-  <div class="history">
-    <div class="body zy-scroll">
-      <div class="zy-table">
-        <div class="tHeader">
-          <span class="btn" @click="clearAllHistory">清空</span>
-        </div>
-        <div class="tBody zy-scroll">
-          <ul>
-            <li v-show="this.history.length === 0">无数据</li>
-            <li v-show="this.history.length > 0">
-              <span class="name">名字</span>
-              <span class="site">片源</span>
-              <span class="note">观看至</span>
-              <span class="operate">
-                <span class="btn"></span>
-                <span class="btn"></span>
-                <span class="btn"></span>
-                <span class="btn"></span>
+  <div class="listpage" id="history">
+    <div class="listpage-header" id="history-header">
+        <el-switch v-model="setting.historyViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-button @click.stop="exportHistory" icon="el-icon-upload2" title="导出全部，自动添加扩展名">导出</el-button>
+        <el-button @click.stop="importHistory" icon="el-icon-download" title="支持同时导入多个文件">导入</el-button>
+        <el-button @click.stop="removeSelectedItems" icon="el-icon-delete-solid">{{ multipleSelection.length === 0 ? "清空" : "删除所选" }}</el-button>
+    </div>
+    <div class="listpage-body" id="history-body">
+      <div class="show-table" id="history-table" v-if="setting.historyViewMode === 'table'">
+        <el-table size="mini" fit height="100%"
+          :data="history"
+          row-key="id"
+          ref="historyTable"
+          @select="selectionCellClick"
+          @selection-change="handleSelectionChange"
+          @row-click="detailEvent">
+          <el-table-column
+            type="selection">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="片名">
+          </el-table-column>
+          <el-table-column
+            prop="site"
+            width="120"
+            label="片源">
+            <template slot-scope="scope">
+              <span>{{ getSiteName(scope.row.site) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="index"
+            width="180"
+            label="观看至">
+            <template slot-scope="scope">
+              <span v-if="scope.row.detail && scope.row.detail.fullList[0].list && scope.row.detail.fullList[0].list.length > 1">
+                第{{ scope.row.index + 1 }}集(共{{scope.row.detail.fullList[0].list.length}}集)
               </span>
-            </li>
-            <li v-for="(i, j) in history" :key="j" @click="historyItemEvent(i)">
-              <span class="name" @click.stop="detailEvent(i)">{{i.name}}</span>
-              <span class="site">{{getSiteName(i.site)}}</span>
-              <span class="note">第{{i.index+1}}集</span>
-              <span class="operate">
-                <span class="btn" @click.stop="playEvent(i)">播放</span>
-                <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                <span class="btn" @click.stop="downloadEvent(i)">下载</span>
-                <span class="btn" @click.stop="removeHistoryItem(i)">删除</span>
-              </span>
-            </li>
-          </ul>
-        </div>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="history.some(e => e.time)"
+            width="150"
+            label="时间进度">
+            <template slot-scope="scope">
+               <span v-if="scope.row.time && scope.row.duration">{{fmtMSS(scope.row.time.toFixed(0))}}/{{fmtMSS(scope.row.duration.toFixed(0))}}</span>
+               <span v-if="scope.row.onlinePlay">在线解析</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="200"
+            header-align="center"
+            align="right">
+            <template slot-scope="scope">
+              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
+              <el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
+              <el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
+              <el-button @click.stop="deleteEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="show-picture" id="star-picture" v-if="setting.historyViewMode === 'picture'">
+        <Waterfall ref="historyWaterfall" :list="history" :gutter="20" :width="240"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
+          animationDuration="0.5s"
+          backgroundColor="rgba(0, 0, 0, 0)">
+            <template slot="item" slot-scope="props">
+              <div class="card">
+                <div class="img">
+                  <img v-if="props.data.detail && props.data.detail.pic" style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.historyWaterfall.refresh()" @click="detailEvent(props.data)">
+                  <div class="operate">
+                    <div class="operate-wrap">
+                      <span class="o-play" @click="playEvent(props.data)">播放</span>
+                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
+                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="info">
+                 <span v-if="props.data.time && props.data.duration">
+                    {{fmtMSS(props.data.time.toFixed(0))}}/{{fmtMSS(props.data.duration.toFixed(0))}}
+                  </span>
+                  <span v-if="props.data.onlinePlay">在线解析</span>
+                  <span v-if="props.data.detail && props.data.detail.fullList[0].list !== undefined && props.data.detail.fullList[0].list.length > 1">
+                    第{{ props.data.index + 1 }}集(共{{props.data.detail.fullList[0].list.length}}集)
+                  </span>
+                </div>
+              </div>
+            </template>
+        </Waterfall>
       </div>
     </div>
-  </div>
+    </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { history, sites } from '../lib/dexie'
+import { history, sites, setting } from '../lib/dexie'
 import zy from '../lib/site/tools'
+import { remote } from 'electron'
+import fs from 'fs'
+import Waterfall from 'vue-waterfall-plugin'
 const { clipboard } = require('electron')
+
 export default {
   name: 'history',
   data () {
     return {
-      history: history,
-      sites: []
+      history: [],
+      sites: [],
+      shiftDown: false,
+      selectionBegin: '',
+      selectionEnd: '',
+      multipleSelection: []
     }
   },
+  components: {
+    Waterfall
+  },
   computed: {
     view: {
       get () {
@@ -81,16 +163,58 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
     }
   },
   watch: {
     view () {
-      this.getAllhistory()
-      this.getAllsites()
+      if (this.view === 'History') {
+        this.getAllhistory()
+        this.getAllsites()
+        if (this.setting.historyViewMode === 'table') this.showShiftPrompt()
+      }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
+    fmtMSS (s) {
+      return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s
+    },
+    selectionCellClick (selection, row) { // 历史id与顺序刚好相反，大的反而在前面
+      if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) {
+        this.selectionEnd = row.id
+        const start = this.history.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd))
+        const end = this.history.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd))
+        const selections = this.history.slice(start, end + 1)
+        this.$nextTick(() => {
+          selections.forEach(e => this.$refs.historyTable.toggleRowSelection(e, true))
+        })
+        this.selectionBegin = this.selectionEnd = ''
+        return
+      }
+      if (selection.includes(row)) {
+        this.selectionBegin = row.id
+      } else {
+        this.selectionBegin = ''
+      }
+    },
+    handleSelectionChange (rows) {
+      this.multipleSelection = rows
+    },
+    removeSelectedItems () {
+      if (!this.multipleSelection.length) this.multipleSelection = this.history
+      this.multipleSelection.forEach(e => history.remove(e.id))
+      this.multipleSelection = []
+      this.getAllhistory()
+      this.updateDatabase()
+    },
     detailEvent (e) {
       this.detail = {
         show: true,
@@ -101,68 +225,73 @@ export default {
         }
       }
     },
-    playEvent (e) {
-      history.find({ site: e.site, ids: e.ids }).then(res => {
-        if (res) {
-          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index } }
-        } else {
-          this.video = { key: e.site, info: { id: e.ids, name: e.name, index: 0 } }
-        }
-      })
+    async playEvent (e) {
+      const db = await history.find({ site: e.site, ids: e.ids })
+      if (db) {
+        this.video = { key: db.site, info: { id: db.ids, name: db.name, index: db.index } }
+      } else {
+        this.video = { key: e.site, info: { id: e.ids, name: e.name, index: 0 } }
+      }
       this.view = 'Play'
     },
     shareEvent (e) {
       this.share = {
         show: true,
         key: e.site,
-        info: e
+        info: e.detail
       }
     },
     downloadEvent (e) {
-      zy.download(e.site, e.ids).then(res => {
-        if (res && res.dl && res.dl.dd) {
-          const text = res.dl.dd._t
-          if (text) {
-            const list = text.split('#')
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-          } else {
-            this.$message.warning('没有查询到下载链接.')
-          }
-        } else {
-          var m3u8List = {}
-          zy.detail(e.site, e.ids).then(res => {
-            const dd = res.dl.dd
-            const type = Object.prototype.toString.call(dd)
-            if (type === '[object Array]') {
-              for (const i of dd) {
-                if (i._flag.indexOf('m3u8') >= 0) {
-                  m3u8List = i._t.split('#')
-                }
-              }
-            } else {
-              m3u8List = dd._t.split('#')
-            }
-            const list = [...m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
+      zy.download(e.site, e.ids, e.videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
-    clearAllHistory () {
-      history.clear().then(res => {
-        this.history = []
+    exportHistory () {
+      this.getAllhistory()
+      const arr = [...this.history]
+      const str = JSON.stringify(arr, null, 2)
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] }
+        ]
+      }
+      remote.dialog.showSaveDialog(options).then(result => {
+        if (!result.canceled) {
+          if (!result.filePath.endsWith('.json')) result.filePath += '.json'
+          fs.writeFileSync(result.filePath, str)
+          this.$message.success('已保存成功')
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    importHistory () {
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] }
+        ],
+        properties: ['openFile', 'multiSelections']
+      }
+      remote.dialog.showOpenDialog(options).then(result => {
+        if (!result.canceled) {
+          result.filePaths.forEach(file => {
+            const str = fs.readFileSync(file)
+            const json = JSON.parse(str)
+            json.forEach(record => {
+              if (record.detail && record.detail.m3u8List) {
+                record.detail.fullList = [].concat({ flag: 'm3u8', list: record.detail.m3u8List })
+                delete record.detail.m3u8List
+              }
+            })
+            history.bulkAdd(json).then(res => {
+              this.$message.success('导入成功')
+              this.getAllhistory()
+            })
+          })
+        }
       })
     },
     getAllhistory () {
@@ -176,49 +305,60 @@ export default {
       })
     },
     getSiteName (key) {
-      var site = this.sites.find(e => e.key === key)
+      const site = this.sites.find(e => e.key === key)
       if (site) {
         return site.name
       }
     },
-    historyItemEvent (e) {
-      this.video = {
-        key: e.site,
-        info: {
-          id: e.ids,
-          name: e.name,
-          type: e.type,
-          year: e.year,
-          index: e.index,
-          time: e.time
-        }
-      }
-    },
-    removeHistoryItem (e) {
+    deleteEvent (e) {
       history.remove(e.id).then(res => {
         this.getAllhistory()
       }).catch(err => {
         this.$message.warning('删除历史记录失败, 错误信息: ' + err)
       })
+    },
+    updateDatabase () {
+      history.clear().then(res => {
+        let id = length
+        this.history.forEach(ele => {
+          ele.id = id
+          id -= 1
+          history.add(ele)
+        })
+      })
+    },
+    updateViewMode () {
+      if (this.setting.historyViewMode === 'table') {
+        this.showShiftPrompt()
+      } else {
+        setTimeout(() => { if (this.$refs.historyWaterfall) this.$refs.historyWaterfall.refresh() }, 700)
+      }
+      setting.find().then(res => {
+        res.historyViewMode = this.setting.historyViewMode
+        setting.update(res)
+      })
+    },
+    showShiftPrompt () {
+      if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+      if (this.setting.shiftTooltipLimitTimes) {
+        this.$message.info('多选时支持shift快捷键')
+        this.setting.shiftTooltipLimitTimes--
+        setting.find().then(res => {
+          res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+          setting.update(res)
+        })
+      }
     }
   },
+  mounted () {
+    addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true })
+    addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false })
+    addEventListener('resize', () => {
+      setTimeout(() => { if (this.$refs.historyWaterfall) this.$refs.historyWaterfall.resize() }, 500)
+    })
+  },
   created () {
     this.getAllhistory()
   }
 }
 </script>
-<style lang="scss" scoped>
-.history{
-  position: relative;
-  height: calc(100% - 40px);
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  .body{
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/IPTV.vue

@@ -0,0 +1,660 @@
+<template>
+  <div class="listpage" id="iptv">
+    <div class="listpage-header" id="iptv-header" v-show="!enableBatchEdit">
+        <el-switch v-model="enableBatchEdit" active-text="批处理及频道调整"></el-switch>
+        <el-button @click.stop="exportChannels" icon="el-icon-upload2" title="导出m3u时必须手动添加扩展名，要保存频道配置信息请选择json格式">导出</el-button>
+        <el-button @click.stop="importChannels" icon="el-icon-download" title='支持同时导入多个文件,导入m3u时网址可带参数、含有"#"号时自动分割'>导入</el-button>
+        <el-button @click="checkAllChannels" icon="el-icon-refresh" :loading="checkAllChannelsLoading" title="可在后台运行">检测{{ this.checkAllChannelsLoading ? this.checkProgress + '/' + this.iptvList.length : '' }}</el-button>
+        <el-button @click.stop="resetChannelsEvent" icon="el-icon-refresh-left">重置</el-button>
+    </div>
+    <div class="listpage-header" id="iptv-header" v-show="enableBatchEdit">
+        <el-switch v-model="enableBatchEdit" active-text="批处理及频道调整"></el-switch>
+        <el-input placeholder="新组名/新频道名" v-model="inputContent"></el-input>
+        <el-switch v-model="batchIsActive" active-text="启用"></el-switch>
+        <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit" title="输入框组名为空时仅保存开关状态">保存分组与开关状态</el-button>
+        <el-button type="primary" icon="el-icon-film" @click.stop="mergeChannel" title="勾选单个时可重命名频道">{{ this.multipleSelection.length === 1 ? '频道重命名' : '频道合并' }}</el-button>
+        <el-button @click.stop="removeSelectedChannels" icon="el-icon-delete-solid">删除</el-button>
+    </div>
+    <div class="listpage-body" id="iptv-table">
+      <div class="show-table" id="iptv-table">
+        <el-table
+          ref="iptvTable"
+          size="mini" fit height="100%" row-key="id"
+          :data="filteredTableData"
+          lazy
+          :load="(row, treeNode, resolve) => resolve(row.channels)"
+          :tree-props="{hasChildren: 'hasChildren'}"
+          @expand-change="expandChange"
+          @select="selectionCellClick"
+          @selection-change="handleSelectionChange"
+          @sort-change="handleSortChange">
+          <el-table-column
+            type="selection"
+            v-if="enableBatchEdit">
+          </el-table-column>
+          <el-table-column
+            default-sort="ascending"
+            prop="name"
+            :class-name="enableBatchEdit ? 'disableExpand' : ''"
+            label="频道名">
+            <template #header>
+              <el-input
+              placeholder="搜索"
+              size="mini"
+              v-model.trim="searchTxt">
+              <i slot="prefix" class="el-input__icon el-icon-search"></i>
+              </el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="isActive"
+            width="120"
+            align="center"
+            :filters = "[{text:'启用', value: true}, {text:'停用', value: false}]"
+            :filter-method="(value, row) => value === row.isActive"
+            label="启用">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.isActive"
+                @click.native.stop='isActiveChangeEvent(scope.row)'>
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            :sort-method="(a , b) => sortByLocaleCompare(a.group, b.group)"
+            prop="group"
+            label="分组"
+            :filters="getFilters"
+            :filter-method="(value, row) => value === row.group"
+            filter-placement="bottom-end">
+            <template slot-scope="scope">
+              <el-button type="text">{{scope.row.group}}</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="状态"
+            sortable
+            :sort-by="['status']"
+            width="120">
+            <template slot-scope="scope">
+              <span v-if="scope.row.status === ' '">
+                <i class="el-icon-loading"></i>
+                检测中...
+              </span>
+              <span v-else>{{scope.row.status}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="right"
+            :width="200">
+            <template #header>
+              <span>{{ enableBatchEdit ? `频道总数:${channelList.length}` : `资源总数:${iptvList.length}` }}</span>
+            </template>
+            <template slot-scope="scope">
+              <el-button @click.stop="moveToTopEvent(scope.row)" type="text" v-if="scope.row.channels">置顶</el-button>
+              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
+              <!-- 检测时先强制批量检测一遍，如果不强制直接单个检测时第一次不会显示“检测中”-->
+              <el-button size="mini" v-if="iptvList.every(channel => channel.status)" v-show="!checkAllChannelsLoading" @click.stop="checkChannel(scope.row)" type="text">检测</el-button>
+              <el-button @click.stop="removeEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { iptv, channelList, setting } from '../lib/dexie'
+import { iptv as defaultChannels } from '../lib/dexie/initData'
+import zy from '../lib/site/tools'
+import { remote } from 'electron'
+import fs from 'fs'
+import Sortable from 'sortablejs'
+export default {
+  name: 'iptv',
+  data () {
+    return {
+      iptvList: [],
+      channelList: [],
+      searchTxt: '',
+      enableBatchEdit: false,
+      inputContent: '',
+      batchIsActive: true,
+      shiftDown: false,
+      selectionBegin: '',
+      selectionEnd: '',
+      multipleSelection: [],
+      expandedRows: [],
+      checkAllChannelsLoading: false,
+      checkProgress: 0,
+      stopFlag: false,
+      sortableTable: ''
+    }
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    filteredTableData () {
+      if (this.searchTxt) {
+        return this.channelList.filter(x => x.name.toLowerCase().includes(this.searchTxt.toLowerCase()))
+      } else {
+        return this.channelList
+      }
+    },
+    getFilters () {
+      const groups = [...new Set(this.channelList.map(iptv => iptv.group))]
+      const filters = []
+      groups.forEach(g => {
+        const doc = {
+          text: g,
+          value: g
+        }
+        filters.push(doc)
+      })
+      return filters
+    }
+  },
+  watch: {
+    enableBatchEdit () {
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        this.enableBatchEdit = false
+        return
+      }
+      if (this.enableBatchEdit) {
+        if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+        if (this.setting.shiftTooltipLimitTimes) {
+          this.$message.info('多选时支持shift快捷键')
+          this.setting.shiftTooltipLimitTimes--
+          setting.find().then(res => {
+            res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+            setting.update(res)
+          })
+        }
+        this.$nextTick(() => {
+          this.expandedRows.forEach(e => this.$refs.iptvTable.toggleRowExpansion(e, false))
+        })
+        this.rowDrop()
+      } else {
+        this.sortableTable.destroy()
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
+    sortByLocaleCompare (a, b) {
+      return a.localeCompare(b, 'zh')
+    },
+    selectionCellClick (selection, row) {
+      if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) {
+        this.selectionEnd = row.id
+        const start = this.channelList.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd))
+        const end = this.channelList.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd))
+        const selections = this.channelList.slice(start, end + 1) // 多选时强制不让展开
+        this.$nextTick(() => {
+          selections.forEach(e => this.$refs.iptvTable.toggleRowSelection(e, true))
+        })
+        this.selectionBegin = this.selectionEnd = ''
+        return
+      }
+      if (selection.includes(row)) {
+        this.selectionBegin = row.id
+      } else {
+        this.selectionBegin = ''
+      }
+    },
+    expandChange (row, expanded) {
+      const index = this.expandedRows.indexOf(row)
+      if (expanded && index === -1) {
+        this.expandedRows.push(row)
+      } else if (!expanded && index !== -1) {
+        this.expandedRows.splice(index, 1)
+      }
+    },
+    handleSelectionChange (rows) {
+      this.multipleSelection = rows
+    },
+    handleSortChange (column, prop, order) {
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return
+      }
+      this.updateDatabase()
+    },
+    saveBatchEdit () {
+      this.multipleSelection.forEach(ele => {
+        if (this.inputContent) {
+          ele.group = this.inputContent
+        }
+        ele.isActive = this.batchIsActive
+      })
+      this.updateDatabase()
+    },
+    mergeChannel () {
+      if (this.inputContent && this.multipleSelection.length) {
+        let channels = []
+        const id = this.multipleSelection[0].id
+        this.multipleSelection.forEach(ele => {
+          channels = channels.concat(ele.channels)
+          channels.forEach(e => { e.channelID = id })
+          channelList.remove(ele.id)
+        })
+        const mergeChannel = { id: id, name: this.inputContent, isActive: channels.some(c => c.isActive), group: this.determineGroup(this.inputContent), hasChildren: channels.length > 1, channels: channels }
+        channelList.add(mergeChannel)
+        this.getChannelList()
+        this.updateDatabase()
+      }
+    },
+    playEvent (e) {
+      if (e.url) {
+        this.video = { iptv: e }
+      } else {
+        let prefer
+        if (e.prefer) prefer = e.channels.find(c => c.id === e.prefer)
+        if (!prefer) prefer = e.channels.filter(c => c.isActive)[0]
+        if (!prefer) {
+          this.$message.error('当前频道所有源已全部停用，不可播放！')
+          return
+        }
+        this.video = { iptv: prefer }
+      }
+      this.view = 'Play'
+    },
+    containsearchTxt (i) {
+      if (this.searchTxt) {
+        return i.name.toLowerCase().includes(this.searchTxt.toLowerCase())
+      } else {
+        return true
+      }
+    },
+    removeEvent (row) {
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      try {
+        if (row.url) { // tree树形控件节点一旦展开，就不再重新加载节点数据
+          const ele = this.channelList.find(e => e.id === row.channelID)
+          ele.channels.splice(ele.channels.findIndex(e => e.id === row.id), 1)
+          channelList.remove(row.channelID)
+          if (ele.channels.length) {
+            if (ele.prefer === row.id) delete ele.prefer
+            if (ele.channels.length === 1) ele.hasChildren = false
+            channelList.add(ele)
+            this.$set(this.$refs.iptvTable.store.states.lazyTreeNodeMap, ele.id, ele.channels)
+          }
+        } else {
+          channelList.remove(row.id)
+        }
+        this.getChannelList()
+      } catch (err) {
+        this.$message.warning('删除频道失败, 错误信息: ' + err)
+      }
+    },
+    exportChannels () { // 导出导入m3u为iptvList，json为channelList
+      const options = {
+        filters: [
+          { name: 'm3u file', extensions: ['m3u'] },
+          { name: 'JSON file', extensions: ['json'] }
+        ]
+      }
+      remote.dialog.showSaveDialog(options).then(result => {
+        if (!result.canceled) {
+          if (result.filePath.endsWith('m3u')) {
+            const writer = require('m3u').extendedWriter()
+            this.iptvList.forEach(e => {
+              writer.file(e.url, -1, e.name)
+            })
+            fs.writeFileSync(result.filePath, writer.toString())
+            this.$message.success('已保存成功')
+          } else {
+            if (!result.filePath.endsWith('.json')) result.filePath += '.json'
+            const arr = [...this.channelList] // 要保存channelList必须选json
+            const str = JSON.stringify(arr, null, 2)
+            fs.writeFileSync(result.filePath, str)
+            this.$message.success('已保存成功')
+          }
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    importChannels () {
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      const options = {
+        filters: [
+          { name: 'm3u file', extensions: ['m3u', 'm3u8'] },
+          { name: 'JSON file', extensions: ['json'] }
+        ],
+        properties: ['openFile', 'multiSelections']
+      }
+      remote.dialog.showOpenDialog(options).then(result => {
+        if (!result.canceled) {
+          result.filePaths.forEach(file => {
+            if (file.endsWith('m3u') || file.endsWith('m3u8')) {
+              const docs = []
+              const URL = require('url')
+              let id = this.channelList.length ? this.channelList.slice(-1)[0].id + 1 : 1
+              const parser = require('iptv-playlist-parser')
+              const playlist = fs.readFileSync(file, { encoding: 'utf-8' })
+              const result = parser.parse(playlist)
+              const supportFormats = /\.(m3u8|flv)$/
+              result.items.forEach(ele => {
+                const urls = ele.url.split('#').filter(e => e.startsWith('http')) // 网址带#时自动分割
+                urls.forEach(url => {
+                  if (ele.name && url && (supportFormats.test(url) || supportFormats.test(new URL.URL(url).pathname))) { // 网址可能带参数
+                    const doc = {
+                      id: id,
+                      name: ele.name,
+                      url: url,
+                      isActive: true
+                    }
+                    id += 1
+                    docs.push(doc)
+                  }
+                })
+              })
+              // 获取url不重复的列表
+              const uniqueList = [...new Map(docs.map(item => [item.url, item])).values()]
+              iptv.clear().then(res => {
+                iptv.bulkAdd(uniqueList).then(e => { // 支持导入同名频道，群里反馈
+                  this.updateChannelList()
+                })
+              })
+            } else {
+              // Import Json file
+              const importedList = JSON.parse(fs.readFileSync(file))
+              importedList.forEach(ele => {
+                const commonEle = this.channelList.find(e => e.name === ele.name)
+                if (commonEle) {
+                  const urls = commonEle.channels.map(c => c.url)
+                  const channels = ele.channels.filter(e => !urls.includes(e.url))
+                  commonEle.channels = commonEle.channels.concat(channels)
+                } else {
+                  ele.id = this.channelList.length ? this.channelList.slice(-1)[0].id + 1 : 1
+                  this.channelList.push(ele)
+                }
+              })
+              this.updateDatabase()
+            }
+          })
+          this.$message.success('导入成功')
+        }
+      })
+    },
+    determineGroup (name) {
+      if (name.toLowerCase().includes('cctv') || name.toLowerCase().includes('cgtn')) {
+        return '央视'
+      } else if (name.includes('香港') || name.includes('澳门') || name.includes('台湾') || name.includes('凤凰') || name.includes('翡翠')) {
+        return '港澳台'
+      } else if (name.includes('卫视')) {
+        return '卫视'
+      } else if (name.includes('高清') || name.includes('蓝光') || name.includes('1080P')) {
+        return '高清'
+      } else {
+        return '其他'
+      }
+    },
+    resetChannelsEvent () {
+      this.stopFlag = true
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('部分检测还未完全终止, 请稍等...')
+        return
+      }
+      this.channelList = []
+      this.iptvList = []
+      iptv.clear().then(iptv.bulkAdd(defaultChannels).then(this.updateChannelList()))
+    },
+    removeSelectedChannels () {
+      this.multipleSelection.forEach(e => channelList.remove(e.id))
+      this.$refs.iptvTable.clearFilter()
+      this.getChannelList()
+      this.updateDatabase()
+      this.enableBatchEdit = false
+    },
+    updateChannelList () {
+      iptv.all().then(res => {
+        res = res.filter(o => !this.iptvList.find(e => o.url === e.url))
+        const resClone = JSON.parse(JSON.stringify(res))
+        const uniqueChannelName = {}
+        for (let i = 0; i < resClone.length; i++) {
+          let channelName = resClone[i].name.trim().replace(/[- ]?(1080p|蓝光|超清|高清|标清|hd|cq|4k)(\d{1,2})?$/i, '')
+          if (channelName.match(/cctv/i)) channelName = channelName.replace('-', '')
+          if (Object.keys(uniqueChannelName).some(name => channelName.match(new RegExp(`${name}(1080p|4k|(?!\\d))`, 'i')))) continue // 避免重复
+          const matchRule = new RegExp(`${channelName}(1080p|4k|(?!\\d))`, 'i')
+          for (let j = i; j < resClone.length; j++) {
+            if (resClone[j].name.match(/cctv/i)) {
+              resClone[j].name = resClone[j].name.replace('-', '')
+            }
+            if (matchRule.test(resClone[j].name)) {
+              if (uniqueChannelName[channelName]) {
+                !uniqueChannelName[channelName].includes(res[j]) && uniqueChannelName[channelName].push(res[j])
+              } else {
+                uniqueChannelName[channelName] = [res[j]]
+              }
+            }
+          }
+        }
+        res.forEach(ele => {
+          if (ele.isActive === undefined) {
+            ele.isActive = true
+          }
+        })
+        Object.keys(uniqueChannelName).forEach(k => {
+          const ele = this.channelList.find(e => e.name === k)
+          if (ele) {
+            ele.channels = ele.channels.concat(uniqueChannelName[k])
+            delete uniqueChannelName[k]
+          }
+        })
+        if (Object.keys(uniqueChannelName).length) {
+          let id = this.channelList.length ? this.channelList.slice(-1)[0].id + 1 : 1
+          const channelList = Object.keys(uniqueChannelName).map(e => { return { id: id++, name: e, isActive: uniqueChannelName[e].some(c => c.isActive), group: this.determineGroup(e), hasChildren: uniqueChannelName[e].length > 1, channels: uniqueChannelName[e] } })
+          this.channelList = this.channelList.concat(channelList)
+        }
+        this.updateDatabase()
+        iptv.clear() // iptv默认清空状态
+      })
+    },
+    async getChannelList () {
+      await channelList.all().then(res => {
+        this.channelList = res
+        this.getIptvList()
+      })
+    },
+    getIptvList () {
+      this.iptvList = this.channelList.reduce((result, item) => { item.channels.forEach(e => { e.channelID = item.id }); return result.concat(item.channels) }, [])
+    },
+    moveToTopEvent (row) {
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      // this.channelList.sort(function (x, y) { return (x.name === i.name && x.url === i.url) ? -1 : (y.name === i.name && y.url === i.url) ? 1 : 0 })
+      if (row.channels) {
+        this.channelList.splice(this.channelList.findIndex(e => e.id === row.id), 1)
+        this.channelList.unshift(row)
+        this.updateDatabase()
+      }
+    },
+    syncTableData () {
+      if (this.$refs.iptvTable.tableData && this.$refs.iptvTable.tableData.length === this.channelList.length) {
+        this.channelList = this.$refs.iptvTable.tableData
+      }
+    },
+    updateDatabase () {
+      this.syncTableData()
+      Object.values(this.$refs.iptvTable.store.states.treeData).forEach(e => { e.loaded = false })
+      channelList.clear().then(res => {
+        this.resetId(this.channelList)
+        channelList.bulkAdd(this.channelList)
+        this.getChannelList()
+      })
+    },
+    resetId (channelList) {
+      let id = 1
+      channelList.forEach(ele => {
+        ele.id = id
+        id += 1
+        ele.channels.forEach(e => {
+          e.channelID = ele.id
+          const embedChannelID = ele.id + '_'
+          const prefer = ele.prefer ? ele.channels.find(e => e.id === ele.prefer) : ''
+          ele.channels.forEach((e, index) => { e.id = embedChannelID + index }) // 为避免混杂，给内置iptv重起id
+          if (prefer) ele.prefer = prefer.id
+        })
+        if (ele.channels.length === 1) {
+          ele.hasChildren = false
+        } else {
+          ele.hasChildren = true
+        }
+      })
+    },
+    rowDrop () {
+      if (this.checkAllChannelsLoading) {
+        this.$message.info('正在检测, 请勿操作.')
+        return false
+      }
+      const tbody = document.getElementById('iptv-table').querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      this.sortableTable = new Sortable(tbody, {
+        filter: '.el-table__row--level-1', // 禁止children拖动
+        onEnd ({ newIndex, oldIndex }) {
+          const currRow = _this.channelList.splice(oldIndex, 1)[0]
+          _this.channelList.splice(newIndex, 0, currRow)
+          _this.updateDatabase()
+        }
+      })
+    },
+    isActiveChangeEvent (row) {
+      if (row.url) {
+        const ele = this.channelList.find(e => e.id === row.channelID)
+        ele.isActive = ele.channels.some(e => e.isActive)
+        channelList.remove(row.channelID)
+        channelList.add(ele)
+      } else {
+        if (row.channels.length === 1) row.channels[0].isActive = row.isActive
+        channelList.remove(row.id)
+        channelList.add(row)
+      }
+    },
+    async checkAllChannels () {
+      if (this.checkAllChannelsLoading) return
+      this.checkAllChannelsLoading = true
+      this.stopFlag = false
+      this.checkProgress = 0
+      this.channelList.filter(e => e.channels.length).forEach(e => { e.status = ' '; e.hasCheckedNum = 0 })
+      const uncheckedList = this.iptvList.filter(e => e.status === undefined || e.status === ' ') // 未检测过的优先
+      const other = this.iptvList.filter(e => !uncheckedList.includes(e))
+      await this.checkChannelsBySite(uncheckedList)
+      await this.checkChannelsBySite(other).then(res => {
+        this.checkAllChannelsLoading = false
+        this.getChannelList()
+        if (!this.stopFlag) this.$message.success('直播频道批量检测已完成！')
+      })
+    },
+    async checkChannelsBySite (channels) {
+      const siteList = {}
+      channels.forEach(channel => {
+        const site = channel.url.split('/')[2]
+        if (siteList[site]) {
+          siteList[site].push(channel)
+        } else {
+          siteList[site] = [channel]
+        }
+      })
+      await Promise.all(Object.values(siteList).map(site => this.checkSingleSite(site)))
+    },
+    async checkSingleSite (channelArray) {
+      for (const c of channelArray) {
+        if (this.stopFlag) return false
+        await this.checkSingleChannel(c)
+      }
+    },
+    async checkSingleChannel (channel, force = false) {
+      if (this.stopFlag) {
+        this.checkProgress += 1
+        return
+      }
+      const ele = this.channelList.find(e => e.id === channel.channelID)
+      if (!force && this.setting.allowPassWhenIptvCheck && (!channel.isActive || !ele.isActive)) {
+        if (!ele.isActive) {
+          ele.status = '跳过'
+        } else if (!channel.isActive) {
+          channel.status = '跳过'
+        }
+      } else {
+        channel.status = ' '
+        const flag = await zy.checkChannel(channel.url)
+        if (flag) {
+          channel.status = '可用'
+        } else {
+          channel.status = '失效'
+          channel.isActive = false
+          if (this.setting.autocleanWhenIptvCheck) {
+            if (ele.prefer === channel.id) delete ele.prefer
+            ele.channels.splice(ele.channels.findIndex(e => e.id === channel.id), 1)
+            ele.hasCheckedNum--
+          }
+        }
+      }
+      this.checkProgress += 1
+      ele.hasCheckedNum++
+      if (ele.hasCheckedNum === ele.channels.length) {
+        if (ele.status === ' ') {
+          ele.status = ele.channels.some(channel => channel.status === '可用') ? '可用' : '失效'
+          if (ele.status === '失效') ele.isActive = false
+        }
+        channelList.remove(channel.channelID)
+        if (ele.channels.length === 1) ele.hasChildren = false
+        if (ele.channels.length) channelList.add(ele)
+      }
+    },
+    async checkChannel (row) {
+      if (row.channels) {
+        row.status = ' '
+        row.hasCheckedNum = 0
+        row.channels.forEach(e => this.checkSingleChannel(e, true))
+      } else {
+        this.checkSingleChannel(row)
+      }
+    }
+  },
+  mounted () {
+    addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true })
+    addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false })
+  },
+  async created () {
+    await this.getChannelList()
+    if (!this.channelList.length) this.resetChannelsEvent()
+  }
+}
+</script>

src/components/Recommendation.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="listpage" id="recommendations">
+    <div class="listpage-header" id="recommendations-header">
+        <el-switch v-model="setting.recommendationViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-button type="text">视频数：{{ recommendations.length }}</el-button>
+        <el-select v-model="selectedAreas" size="small" multiple placeholder="地区" popper-class="popper" :popper-append-to-body="false">
+          <el-option
+            v-for="item in areas"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-select v-model="selectedTypes" size="small" multiple placeholder="类型" popper-class="popper" :popper-append-to-body="false">
+          <el-option
+            v-for="item in types"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-select v-model="sortKeyword" size="small" placeholder="排序" popper-class="popper" :popper-append-to-body="false">
+          <el-option
+            v-for="item in sortKeywords"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
+    </div>
+    <div class="listpage-body" id="recommendations-body" >
+      <div class="show-table" id="star-table" v-if="setting.recommendationViewMode === 'table'">
+        <el-table size="mini" fit height="100%" row-key="id"
+        ref="recommendationsTable"
+        :data="filteredRecommendations"
+        @row-click="detailEvent">
+          <el-table-column
+            prop="name"
+            label="片名">
+          </el-table-column>
+          <el-table-column
+            prop="detail.area"
+            label="地区"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="detail.type"
+            label="类型"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="detail.year"
+            label="上映"
+            width="100"
+            align="center">
+          </el-table-column>
+          <el-table-column v-if="filteredRecommendations.some(e => e.rate)"
+            prop="rate"
+            align="center"
+            width="100"
+            label="豆瓣评分">
+          </el-table-column>
+          <el-table-column v-if="filteredRecommendations.some(e => e.detail.note)"
+            prop="detail.note"
+            label="备注">
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            header-align="center"
+            align="right"
+            width="200">
+            <template slot-scope="scope">
+              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
+              <el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
+              <el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
+              <el-button @click.stop="deleteEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="show-picture" id="star-picture" v-if="setting.recommendationViewMode === 'picture'">
+        <Waterfall ref="recommendationsWaterfall" :list="filteredRecommendations" :gutter="20" :width="240"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
+          animationDuration="0.5s"
+          backgroundColor="rgba(0, 0, 0, 0)">
+            <template slot="item" slot-scope="props">
+              <div class="card">
+                <div class="img">
+                  <div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
+                    <span>{{props.data.rate}}分</span>
+                  </div>
+                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.recommendationsWaterfall.refresh()" @click="detailEvent(props.data)">
+                  <div class="operate">
+                    <div class="operate-wrap">
+                      <span class="o-play" @click="playEvent(props.data)">播放</span>
+                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
+                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="info">
+                  <span>{{props.data.detail.area}}</span>
+                  <span>{{props.data.detail.year}}</span>
+                  <span>{{props.data.detail.note}}</span>
+                  <span>{{props.data.detail.type}}</span>
+                </div>
+              </div>
+            </template>
+        </Waterfall>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { history, recommendation, setting } from '../lib/dexie'
+import zy from '../lib/site/tools'
+import Waterfall from 'vue-waterfall-plugin'
+const { clipboard } = require('electron')
+export default {
+  name: 'recommendations',
+  data () {
+    return {
+      recommendations: [],
+      sites: [],
+      loading: false,
+      types: [],
+      selectedTypes: [],
+      areas: [],
+      selectedAreas: [],
+      sortKeyword: '',
+      sortKeywords: ['上映', '评分', '默认']
+    }
+  },
+  components: {
+    Waterfall
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
+    },
+    filteredRecommendations () {
+      let filteredData = this.recommendations.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.detail.area))
+      filteredData = filteredData.filter(x => (this.selectedTypes.length === 0) || this.selectedTypes.includes(x.detail.type))
+      return filteredData
+    }
+  },
+  watch: {
+    view () {
+      if (this.view === 'Recommendation') {
+        if (this.$refs.recommendationsWaterfall) this.$refs.recommendationsWaterfall.resize()
+      }
+    },
+    sortKeyword () {
+      switch (this.sortKeyword) {
+        case '上映':
+          this.recommendations = this.recommendations.sort(function (a, b) {
+            return b.detail.year - a.detail.year
+          })
+          break
+        case '评分':
+          this.recommendations.sort(function (a, b) {
+            return b.rate - a.rate
+          })
+          break
+        case '默认':
+          this.recommendations.sort(function (a, b) {
+            return b.id - a.id
+          })
+          break
+        default:
+          break
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
+    detailEvent (e) {
+      this.detail = {
+        show: true,
+        key: e.key,
+        info: {
+          id: e.ids,
+          name: e.name
+        }
+      }
+    },
+    updateEvent () {
+      const url = 'https://gitee.com/cuiocean/ZY-Player-Resources/raw/main/Recommendations/Recommendations.json'
+      this.loading = true
+      const axios = require('axios')
+      axios.get(url).then(res => {
+        if (res.status === 200) {
+          if (res.data.length > 0) {
+            this.recommendations = res.data
+            recommendation.clear().then(recommendation.bulkAdd(this.recommendations))
+            this.getFilterData()
+            this.$message.success('更新推荐成功. 仅根据作者cuiocean个人喜好推荐,不喜请无视.')
+          }
+        }
+        this.loading = false
+      }).catch(error => {
+        this.loading = false
+        this.$message.error('更新推荐失败. ' + error)
+        this.$message.warning('最新的推荐数据保存在Github上,请考虑使用代理或者等待下一版本内置数据更新.')
+      })
+    },
+    async playEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      if (db) {
+        this.video = { key: e.key, info: { id: db.ids, name: db.name, index: db.index }, detail: db.detail }
+      } else {
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 }, detail: e.detail }
+      }
+      this.view = 'Play'
+    },
+    deleteEvent (e) {
+      recommendation.remove(e.id).then(res => {
+        if (res) {
+          this.$message.warning('删除失败')
+        }
+        this.getRecommendations()
+      })
+    },
+    shareEvent (e) {
+      this.share = {
+        show: true,
+        key: e.key,
+        info: e.detail
+      }
+    },
+    async downloadEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      let videoFlag
+      if (db) videoFlag = db.videoFlag
+      zy.download(e.key, e.ids, videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
+      })
+    },
+    getRecommendations () {
+      recommendation.all().then(res => {
+        this.recommendations = res.sort(function (a, b) {
+          return b.id - a.id
+        })
+        this.getFilterData()
+      })
+    },
+    getFilterData () {
+      this.types = [...new Set(this.recommendations.map(ele => ele.detail.type))].filter(x => x)
+      this.areas = [...new Set(this.recommendations.map(ele => ele.detail.area))].filter(x => x)
+    },
+    updateViewMode () {
+      setTimeout(() => { if (this.$refs.recommendationsWaterfall) this.$refs.recommendationsWaterfall.refresh() }, 700)
+      setting.find().then(res => {
+        res.recommendationViewMode = this.setting.recommendationViewMode
+        setting.update(res)
+      })
+    }
+  },
+  created () {
+    this.getRecommendations()
+  },
+  mounted () {
+    addEventListener('resize', () => {
+      setTimeout(() => { if (this.$refs.recommendationsWaterfall) this.$refs.recommendationsWaterfall.resize() }, 500)
+    })
+  }
+}
+</script>

src/components/Setting.vue

@@ -5,21 +5,10 @@
       <div class="info">
         <a @click="linkOpen('http://zyplayer.fun/')">官网</a>
         <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">Github</a>
-        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">v{{pkg.version}} 反馈</a>
-      </div>
-      <div class="view">
-        <div class="title">视图</div>
-        <div class="view-box">
-          <div class="zy-select" @mouseleave="show.view = false">
-            <div class="vs-placeholder" @click="show.view = true">默认视图</div>
-            <div class="vs-options" v-show="show.view">
-              <ul class="zy-scroll">
-                <li :class="d.view === 'picture' ? 'active' : ''" @click="changeView('picture')">海报</li>
-                <li :class="d.view === 'table' ? 'active' : ''" @click="changeView('table')">列表</li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/tag/v' + pkg.version)">v{{pkg.version}}更新日志</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues/80')">常见问题</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈建议</a>
+        <a style="color:#38dd77" @click="openUpdate()" v-show="update.find" >最新版本v{{update.version}}</a>
       </div>
       <div class="shortcut">
         <div class="title">快捷键</div>
@@ -40,29 +29,23 @@
             <div class="vs-placeholder vs-noAfter" @click="impShortcut">导入</div>
           </div>
           <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="openDoc('shortcut')">说明文档</div>
+            <div class="vs-placeholder vs-noAfter" @click="resetShortcut">重置</div>
           </div>
         </div>
       </div>
-      <div class='site'>
-         <div class="title">收藏管理</div>
-         <div class="site-box">
-            <div class="zy-select">
-              <div class="vs-placeholder vs-noAfter" @click="exportFavorites">导出</div>
-            </div>
-            <div class="zy-select">
-              <div class="vs-placeholder vs-noAfter" @click="importFavorites">导入</div>
-            </div>
-            <div class="zy-select">
-              <div class="vs-placeholder vs-noAfter" @click="clearFavorites">清空收藏</div>
-            </div>
+      <div class="shortcut" title="清理缓存后图片资源需重新下载，不建议清理，软件会根据磁盘空间动态管理缓存大小">
+        <div class="title">缓存</div>
+        <div class="shortcut-box">
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="clearCache">清理缓存</div>
           </div>
+        </div>
       </div>
-      <div class='search'>
-         <div class="title">搜索</div>
-         <div class="zy-checkbox">
-           <input type="checkbox" v-model="setting.searchAllSites" @change="updateSearchOption($event)"> 搜索所有资源
-         </div>
+      <div class="site">
+        <div class="title">定位时间设置</div>
+        <div class="zy-input">
+          左/右方向键:<input style="width:50px" type="number" v-model = "d.forwardTimeInSec" @change="updateSettingEvent">秒
+        </div>
       </div>
       <div class='site'>
          <div class="title">第三方播放</div>
@@ -70,30 +53,63 @@
             <div class="zy-select">
               <div class="vs-placeholder vs-noAfter" @click="selectLocalPlayer">选择本地播放器</div>
             </div>
-            <div class="zy-select" @click = "editPlayerPath = true">
-              <div class="vs-placeholder vs-noAfter" v-show = "editPlayerPath == false">
+            <div class="zy-select" @click = "show.editPlayerPath = true">
+              <div class="vs-placeholder vs-noAfter" v-show = "show.editPlayerPath == false">
                 <label>编辑</label>
               </div>
-              <input class="vs-input" v-show = "editPlayerPath == true" v-model = "externalPlayer"
-                @blur= "updatePlayerPath"
-                @keyup.enter = "updatePlayerPath">
+              <input class="zy-input" v-show = "show.editPlayerPath == true" v-model = "d.externalPlayer"
+                @blur= "updateSettingEvent"
+                @keyup.enter = "updateSettingEvent">
             </div>
           </div>
       </div>
+      <div class="site">
+        <div class="title">直播源管理</div>
+        <div class="site-box">
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="view = 'IPTV'">编辑直播源</div>
+          </div>
+          <div class="zy-input">
+           <input type="checkbox" v-model = "d.allowPassWhenIptvCheck" @change="updateSettingEvent"> 检测时自动跳过停用源
+          </div>
+          <div class="zy-input">
+           <input type="checkbox" v-model = "d.autocleanWhenIptvCheck" @change="updateSettingEvent"> 检测时自动清理无效源
+          </div>
+          <div class="zy-input">
+          <input type="checkbox" v-model = "d.autoChangeSourceWhenIptvStalling" @change="updateSettingEvent">
+          卡顿时自动换源换台:<input style="width:50px" type="number" min=0 v-model.number = "d.waitingTimeInSec" @change="updateSettingEvent">秒
+          </div>
+        </div>
+      </div>
       <div class="site">
         <div class="title">源管理</div>
         <div class="site-box">
-          <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="exportSites">导出</div>
-          </div>
-          <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="importSites">导入</div>
-          </div>
           <div class="zy-select">
             <div class="vs-placeholder vs-noAfter" @click="editSitesEvent">编辑源</div>
           </div>
           <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="resetSites">重置源</div>
+            <div class="vs-placeholder vs-noAfter" @click="show.configDefaultParseUrlDialog = true">设置默认解析接口</div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="show.configSitesDataUrlDialog = true">设置源站接口文件</div>
+          </div>
+          <div class="zy-input" @click="toggleExcludeRootClasses">
+           <input type="checkbox" v-model = "d.excludeRootClasses" @change="updateSettingEvent"> 屏蔽主分类
+          </div>
+        </div>
+      </div>
+      <div class="site">
+        <div class="title">网络</div>
+        <div class="site-box">
+          <div class="zy-select" @mouseleave="show.proxy = false">
+            <div class="vs-placeholder" @click="show.proxy = true">代理设置</div>
+            <div class="vs-options" v-if="show.proxy">
+              <ul class="zy-scroll">
+                <li :class="d.proxy.type === 'none' ? 'active' : ''" @click="changeProxyType('none')">不使用代理</li>
+                <!-- <li :class="d.proxy.type === 'system' ? 'active' : ''" @click="changeProxyType('system')">使用系统代理</li> -->
+                <li :class="d.proxy.type === 'manual' ? 'active' : ''" @click="changeProxyType('manual')">手动指定代理</li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
@@ -129,56 +145,170 @@
       <div class="qrcode">
         <div class="title">请作者吃辣条</div>
         <div class="qrcode-box">
-          <img class="qrcode-item" src="../assets/image/alipay.png">
-          <img class="qrcode-item" src="../assets/image/wepay.jpg">
+          <img class="qrcode-item" src="../assets/image/wepay-hunlongyu.png">
+          <img class="qrcode-item" src="../assets/image/wepay_cuiocean.jpg">
         </div>
       </div>
       <div class="clearDB">
         <span @click="clearDBEvent" class="clearBtn">软件重置</span>
-        <span class="clearTips">如果新安装用户, 无法显示资源, 请点击软件重置. 如非必要, 切勿点击. 会清空用户数据, 恢复默认设置. 点击即软件重置, 并关闭软件.</span>
+        <span @click="changePasswordEvent" class="clearBtn">设置密码</span>
+        <div class="clearTips">如果新安装用户, 无法显示资源, 请点击软件重置. 如非必要, 切勿点击. 会清空用户数据, 恢复默认设置. 点击即软件重置, 并关闭软件.</div>
       </div>
       <div class="Tips">
         <span>所有资源来自网上, 该软件不参与任何制作, 上传, 储存等内容, 禁止传播违法资源. 该软件仅供学习参考, 请于安装后24小时内删除.</span>
       </div>
     </div>
+    <div> <!-- 设置默认解析接口 -->
+      <el-dialog :visible.sync="show.configDefaultParseUrlDialog" v-if='show.configDefaultParseUrlDialog' title="设置默认解析接口" :append-to-body="true" @close="closeDialog">
+        <el-form label-width="45px" label-position="left">
+          <el-form-item label="URL:">
+            <el-input v-model="setting.defaultParseURL" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入解析接口地址，为空时会自动设置，重置时会自动更新默认接口地址"/>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="danger" @click="get7kParseURL">重置</el-button>
+          <el-button type="primary" @click="configDefaultParseURL">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div> <!-- 设置源站接口文件 -->
+      <el-dialog :visible="show.configSitesDataUrlDialog" v-if='show.configSitesDataUrlDialog' title="设置源站接口文件" :append-to-body="true" @close="closeDialog">
+        <el-form label-width="45px" label-position="left">
+          <el-form-item label="URL:">
+            <el-input v-model="setting.sitesDataURL" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入解析接口地址，为空时会自动设置，重置时会自动更新默认接口地址"/>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="danger" @click="getDefaultdeSitesDataURL">重置</el-button>
+          <el-button type="primary" @click="configSitesDataURL">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div> <!-- 输入密码页面 -->
+      <el-dialog :visible.sync="show.checkPasswordDialog" v-if='show.checkPasswordDialog' :append-to-body="true" @close="closeDialog" width="300px">
+        <el-form label-width="75px" label-position="left">
+          <el-form-item label="当前密码" prop='name'>
+            <el-input v-model="inputPassword" placeholder="请输入您的当前密码" />
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="checkPasswordEvent">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div> <!-- 修改密码页面 -->
+      <el-dialog :visible.sync="show.changePasswordDialog" v-if='show.changePasswordDialog' :append-to-body="true" @close="closeDialog" width="300px">
+        <el-form label-width="75px" label-position="left">
+          <el-form-item label="新密码" prop='name'>
+            <el-input v-model="inputPassword" placeholder="请输入您的新密码" />
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="confirmedChangePasswordEvent">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div> <!-- 代理设置界面 -->
+      <el-dialog :visible.sync="show.proxyDialog" :append-to-body="true" @close="closeDialog" width="400px">
+        <el-form label-width="50px" label-position="left" size="small">
+          <el-form-item label="协议: " prop='scheme'>
+            <el-col :span="15">
+              <el-select v-model="proxy.scheme" placeholder="请选择协议类型">
+                <el-option label="http" value="http"></el-option>
+                <el-option label="socks5" value="socks5"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="地址: " prop='url'>
+            <el-col :span="15">
+              <el-input v-model="proxy.url" placeholder="地址" />
+            </el-col>
+            <el-col class="line" :span="2" style="text-align: center;">:</el-col>
+            <el-col :span="7">
+              <el-input v-model="proxy.port" placeholder="端口" width="80px" />
+            </el-col>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="proxyConfirm">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div class="update" v-if="update.show">
+      <div class="wrapper">
+        <div class="body">
+          <div class="content" v-html="update.html"></div>
+        </div>
+        <div class="footer">
+          <el-button size="small" @click="closeUpdate">关闭</el-button>
+          <el-button size="small" v-show="update.showDownload" @click="startUpdate">更新</el-button>
+          <el-button size="small" v-show="!update.showDownload && !update.downloaded">正在更新...</el-button>
+          <el-button size="small" v-show="update.downloaded" @click="installUpdate">安装</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
 import pkg from '../../package.json'
-import { setting, sites, shortcut, star } from '../lib/dexie'
-import { shell, clipboard, remote } from 'electron'
+import { setting, sites, shortcut } from '../lib/dexie'
+import { localKey as defaultShortcuts } from '../lib/dexie/initData'
+import { shell, clipboard, remote, ipcRenderer } from 'electron'
 import db from '../lib/dexie/dexie'
-import { sites as defaultSites } from '../lib/dexie/initData'
-import fs from 'fs'
+import zy from '../lib/site/tools'
 export default {
   name: 'setting',
   data () {
     return {
       pkg: pkg,
-      sitesList: [],
       shortcutList: [],
-      favoritesList: [],
       show: {
         site: false,
         shortcut: false,
-        view: false
+        view: false,
+        editPlayerPath: false,
+        checkPasswordDialog: false,
+        changePasswordDialog: false,
+        proxy: false,
+        proxyDialog: false,
+        configDefaultParseUrlDialog: false,
+        configSitesDataUrlDialog: false
       },
-      externalPlayer: '',
-      editPlayerPath: false,
-      d: {
-        id: 0,
-        site: '',
-        theme: '',
-        shortcut: true,
-        searchAllSites: true,
-        view: 'picture',
-        externalPlayer: '',
-        editPlayerPath: false
+      d: { },
+      latestVersion: pkg.version,
+      inputPassword: '',
+      action: '',
+      proxy: {
+        type: '',
+        scheme: '',
+        url: '',
+        port: ''
+      },
+      update: {
+        find: false,
+        version: '',
+        show: false,
+        html: '',
+        downloaded: false,
+        showDownload: true
       }
     }
   },
   computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
     setting: {
       get () {
         return this.$store.getters.getSetting
@@ -186,39 +316,40 @@ export default {
       set (val) {
         this.SET_SETTING(val)
       }
-    },
-    editSites: {
-      get () {
-        return this.$store.getters.getEditSites
-      },
-      set (val) {
-        this.SET_EDITSITES(val)
-      }
     }
   },
   methods: {
-    ...mapMutations(['SET_SETTING', 'SET_EDITSITES']),
+    ...mapMutations(['SET_SETTING', 'SET_VIEW']),
     linkOpen (e) {
       shell.openExternal(e)
     },
     getSetting () {
       setting.find().then(res => {
-        this.d = {
-          id: res.id,
-          site: res.site,
-          theme: res.theme,
-          shortcut: res.shortcut,
-          view: res.view,
-          searchAllSites: res.searchAllSites,
-          externalPlayer: res.externalPlayer,
-          editPlayerPath: false
-        }
+        this.d = res
         this.setting = this.d
+        if (!this.setting.defaultParseURL) this.configDefaultParseURL()
+        if (!this.setting.sitesDataURL) this.getDefaultdeSitesDataURL()
+      })
+    },
+    getDefaultSites () {
+      this.getDefaultdeSitesDataURL()
+      const axios = require('axios')
+      axios.get(this.setting.sitesDataURL).then(res => {
+        if (res.status === 200) {
+          if (res.data.length > 0) {
+            sites.clear().then(sites.bulkAdd(res.data))
+          }
+        }
+      }).catch(error => {
+        this.$message.error('获取云端源站失败. ' + error)
       })
     },
     getSites () {
       sites.all().then(res => {
-        this.sitesList = res
+        if (res.length <= 0) {
+          this.$message.warning('检测到视频源未能正常加载, 即将重置源.')
+          this.getDefaultSites()
+        }
       })
     },
     getShortcut () {
@@ -226,104 +357,49 @@ export default {
         this.shortcutList = res
       })
     },
-    getFavorites () {
-      star.all().then(res => {
-        this.favoritesList = res
-      })
+    async clearCache () {
+      const win = remote.getCurrentWindow()
+      const ses = win.webContents.session
+      const size = await ses.getCacheSize() / 1024 / 1024
+      const mb = size.toFixed(2)
+      await ses.clearCache()
+      this.$message.success(`清除缓存成功, 共清理 ${mb} MB`)
     },
-    changeView (e) {
-      this.d.view = e
-      setting.update(this.d).then(res => {
-        this.$message.success('修改成功')
-        this.show.view = false
-        this.setting = this.d
-      })
+    updateSettingEvent () {
+      this.show.editPlayerPath = false
+      this.setting = this.d
+      setting.update(this.d)
     },
-    siteClick (e) {
-      this.d.site = e
-      setting.update(this.d).then(res => {
-        this.$message.success('修改默认源成功')
-        this.setting = this.d
-        this.show.site = false
-      })
+    toggleExcludeR18Films () {
+      this.d.excludeR18Films = !this.d.excludeR18Films
+      this.updateSettingEvent()
     },
-    updateSearchOption (e) {
-      this.d.searchAllSites = this.setting.searchAllSites
-      setting.update(this.d).then(res => {
-        this.setting = this.d
-      })
+    toggleExcludeRootClasses () {
+      this.d.excludeRootClasses = !this.d.excludeRootClasses
+      this.updateSettingEvent()
     },
-    exportFavorites () {
-      this.getFavorites()
-      const arr = [...this.favoritesList]
-      const str = JSON.stringify(arr, null, 4)
-      const options = {
-        filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
-        ]
+    async get7kParseURL () {
+      this.$message.info('正在获取7K源解析地址...')
+      const parseURL = await zy.get7kParseURL()
+      if (parseURL.startsWith('http')) {
+        this.$message.success('获取成功，更新应用默认解析接口地址...')
+        this.setting.defaultParseURL = parseURL
       }
-      remote.dialog.showSaveDialog(options).then(result => {
-        if (!result.canceled) {
-          fs.writeFileSync(result.filePath, str)
-          this.$message.success('已保存成功')
-        }
-      }).catch(err => {
-        this.$message.error(err)
-      })
     },
-    importFavorites () {
-      const options = {
-        filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
-        ],
-        properties: ['openFile', 'multiSelections']
-      }
-      remote.dialog.showOpenDialog(options).then(result => {
-        if (!result.canceled) {
-          result.filePaths.forEach(file => {
-            var str = fs.readFileSync(file)
-            const json = JSON.parse(str)
-            star.bulkAdd(json).then(e => {
-              this.getFavorites()
-            })
-            this.upgradeFavorites()
-          })
-          this.$message.success('导入收藏成功')
-        }
-      }).catch(err => {
-        this.$message.error(err)
-      })
+    async configDefaultParseURL () {
+      if (!this.setting.defaultParseURL) await this.get7kParseURL()
+      this.d.defaultParseURL = this.setting.defaultParseURL.trim()
+      this.show.configDefaultParseUrlDialog = false
+      this.updateSettingEvent()
     },
-    clearFavorites () {
-      star.clear().then(e => {
-        this.getFavorites()
-        this.$message.success('清空所有收藏成功')
-      })
+    getDefaultdeSitesDataURL () {
+      this.setting.sitesDataURL = 'https://gitee.com/cuiocean/ZY-Player-Resources/raw/main/Sites/Sites.json'
     },
-    upgradeFavorites () {
-      star.all().then(res => {
-        res.forEach(element => {
-          const docs = {
-            key: element.key,
-            ids: element.ids,
-            name: element.name,
-            type: element.type,
-            year: element.year,
-            last: element.last,
-            note: element.note
-          }
-          star.find({ key: element.key, ids: element.ids }).then(res => {
-            if (!res) {
-              star.add(docs)
-            }
-          })
-        })
-        this.getFavorites()
-      })
+    configSitesDataURL () {
+      if (!this.setting.sitesDataURL) this.getDefaultdeSitesDataURL()
+      this.d.sitesDataURL = this.setting.sitesDataURL
+      this.show.configSitesDataUrlDialog = false
+      this.updateSettingEvent()
     },
     selectLocalPlayer () {
       const options = {
@@ -335,13 +411,10 @@ export default {
       }
       remote.dialog.showOpenDialog(options).then(result => {
         if (!result.canceled) {
-          var playerPath = result.filePaths[0].replace(/\\/g, '/')
+          const playerPath = result.filePaths[0].replace(/\\/g, '/')
           this.$message.success('设定第三方播放器路径为：' + result.filePaths[0])
           this.d.externalPlayer = playerPath
-          this.externalPlayer = playerPath
-          setting.update(this.d).then(res => {
-            this.setting = this.d
-          })
+          this.updateSettingEvent()
         }
       }).catch(err => {
         this.$message.error(err)
@@ -350,101 +423,76 @@ export default {
     resetLocalPlayer () {
       this.d.externalPlayer = ''
       setting.update(this.d).then(res => {
-        this.setting = this.d
+        this.updateSettingEvent()
         this.$message.success('重置第三方播放器成功')
       })
     },
     updatePlayerPath () {
-      this.$message.success('设定第三方播放器路径为：' + this.externalPlayer)
-      this.editPlayerPath = false
-      this.d.externalPlayer = this.externalPlayer
-      setting.update(this.d).then(res => {
-        this.setting = this.d
-      })
-    },
-    exportSites () {
-      this.getSites()
-      const arr = [...this.sitesList]
-      const str = JSON.stringify(arr, null, 4)
-      const options = {
-        filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
-        ]
-      }
-      remote.dialog.showSaveDialog(options).then(result => {
-        if (!result.canceled) {
-          fs.writeFileSync(result.filePath, str)
-          this.$message.success('已保存成功')
-        }
-      }).catch(err => {
-        this.$message.error(err)
-      })
-    },
-    importSites () {
-      const options = {
-        filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
-        ],
-        properties: ['openFile']
-      }
-      remote.dialog.showOpenDialog(options).then(result => {
-        if (!result.canceled) {
-          sites.clear()
-          result.filePaths.forEach(file => {
-            var str = fs.readFileSync(file)
-            const json = JSON.parse(str)
-            sites.bulkAdd(json).then(e => {
-              this.getSites()
-              this.d.site = json[0].key
-              setting.update(this.d).then(res => {
-                this.setting = this.d
-              })
-            })
-            this.$message.success('导入成功')
-          }).catch(err => {
-            this.$message.error(err)
-          })
-        }
-      })
+      this.$message.success('设定第三方播放器路径为：' + this.d.externalPlayer)
+      this.show.editPlayerPath = false
+      this.updateSettingEvent()
     },
     editSitesEvent () {
-      this.editSites = {
-        show: true,
-        sites: this.sitesList
+      if (this.d.password) {
+        this.action = 'EditSites'
+        this.show.checkPasswordDialog = true
+      } else {
+        this.view = 'EditSites'
       }
     },
-    resetSites () {
-      sites.clear()
-      sites.bulkAdd(defaultSites).then(e => {
-        this.getSites()
-        this.d.site = defaultSites[0].key
-        setting.update(this.d).then(res => {
-          this.setting = this.d
-          this.$message.success('重置源成功')
-        })
-      })
+    async closeDialog () {
+      this.show.checkPasswordDialog = false
+      this.show.changePasswordDialog = false
+      this.show.configDefaultParseUrlDialog = false
+      this.show.configSitesDataUrlDialog = false
+      if (this.show.proxyDialog) {
+        this.show.proxyDialog = false
+        this.setting.proxy.type = 'none'
+        await this.updateSettingEvent()
+        this.$message.info('取消使用代理')
+        zy.proxy()
+      }
+      this.inputPassword = ''
+    },
+    checkPasswordEvent () {
+      if (this.inputPassword === this.d.password) {
+        this.closeDialog()
+        if (this.action === 'EditSites') {
+          this.view = 'EditSites'
+        } else if (this.action === 'ChangePassword') {
+          this.show.changePasswordDialog = true
+        } else if (this.action === 'CleanDB') {
+          this.clearDB()
+        }
+      } else {
+        this.$message.error('您输入的密码错误，请重试')
+      }
+    },
+    changePasswordEvent () {
+      if (this.d.password) {
+        this.action = 'ChangePassword'
+        this.show.checkPasswordDialog = true
+      } else {
+        this.show.changePasswordDialog = true
+      }
+    },
+    confirmedChangePasswordEvent () {
+      this.d.password = this.inputPassword
+      this.updateSettingEvent()
+      this.closeDialog()
     },
     changeTheme (e) {
       this.d.theme = e
-      setting.update(this.d).then(res => {
-        this.$message.success('修改成功')
-      })
+      this.updateSettingEvent()
     },
     changeShortcut (e) {
       this.d.shortcut = e
-      setting.update(this.d).then(res => {
-        this.$message.success('修改成功')
-        this.setting = this.d
-        this.show.shortcut = false
-      })
+      this.updateSettingEvent()
+      this.show.shortcut = false
     },
     expShortcut () {
       const arr = [...this.shortcutList]
-      const str = JSON.stringify(arr, null, 4)
+      const str = JSON.stringify(arr, null, 2)
       clipboard.writeText(str)
       this.$message.success('已复制到剪贴板')
     },
@@ -455,11 +503,50 @@ export default {
         this.$message.info('已清空原数据')
         shortcut.add(json).then(e => {
           this.$message.success('已添加成功')
-          this.getSites()
+          this.getShortcut()
+          this.d.shortcutModified = true
+          this.updateSettingEvent()
         })
       })
     },
+    resetShortcut () {
+      shortcut.clear().then(shortcut.add(defaultShortcuts)).then(res => {
+        this.getShortcut()
+        this.$message.success('快捷键已重置')
+        this.d.shortcutModified = true
+        this.updateSettingEvent()
+      })
+    },
+    async changeProxyType (e) {
+      this.d.proxy.type = e
+      if (e === 'manual') {
+        this.show.proxyDialog = true
+        this.proxy.scheme = this.setting.proxy.scheme
+        this.proxy.url = this.setting.proxy.url
+        this.proxy.port = this.setting.proxy.port
+      }
+      await this.updateSettingEvent()
+      this.show.proxy = false
+      zy.proxy()
+    },
+    async proxyConfirm () {
+      this.d.proxy.scheme = this.proxy.scheme
+      this.d.proxy.url = this.proxy.url
+      this.d.proxy.port = this.proxy.port
+      await this.updateSettingEvent()
+      this.show.proxyDialog = false
+      zy.proxy()
+      this.$message.info('开始使用代理')
+    },
     clearDBEvent () {
+      if (this.d.password) {
+        this.action = 'CleanDB'
+        this.show.checkPasswordDialog = true
+      } else {
+        this.clearDB()
+      }
+    },
+    clearDB () {
       db.delete().then(res => {
         this.$message.success('重置成功')
         const win = remote.getCurrentWindow()
@@ -475,13 +562,50 @@ export default {
         this.linkOpen('http://zyplayer.fun/doc/shortcut/')
         return false
       }
+    },
+    checkUpdate () {
+      ipcRenderer.send('checkForUpdate')
+      ipcRenderer.on('update-available', (e, info) => {
+        this.update.find = true
+        this.update.version = info.version
+        this.update.html = info.releaseNotes
+      })
+    },
+    openUpdate () {
+      this.update.show = true
+    },
+    closeUpdate () {
+      this.update.show = false
+    },
+    startUpdate () {
+      this.update.showDownload = false
+      ipcRenderer.send('downloadUpdate')
+      ipcRenderer.on('update-downloaded', () => {
+        this.update.downloaded = true
+        this.$message.success('更新已下载完成！Mac用户须手动点击“安装”，其它系统会在退出后自动安装')
+      })
+    },
+    installUpdate () {
+      ipcRenderer.send('quitAndInstall')
+    },
+    createContextMenu () {
+      const { Menu, MenuItem } = remote
+      const menu = new Menu()
+      menu.append(new MenuItem({ label: '快速复制', role: 'copy' }))
+      menu.append(new MenuItem({ label: '快速粘贴', role: 'paste' }))
+      menu.append(new MenuItem({ label: '编辑', role: 'editMenu' }))
+      window.addEventListener('contextmenu', e => {
+        e.preventDefault()
+        menu.popup(remote.getCurrentWindow())
+      })
     }
   },
   created () {
-    this.getSetting()
     this.getSites()
+    this.getSetting()
     this.getShortcut()
-    this.getFavorites()
+    this.checkUpdate()
+    this.createContextMenu()
   }
 }
 </script>
@@ -518,22 +642,6 @@ export default {
       cursor: pointer;
     }
   }
-  .view{
-    width: 100%;
-    padding: 20px;
-    margin-top: 20px;
-    .view-box{
-      margin-top: 10px;
-      .zy-select{
-        margin-right: 20px;
-      }
-    }
-  }
-  .search{
-    width: 100%;
-    padding: 20px;
-    margin-top: 20px;
-  }
   .site{
     width: 100%;
     padding: 20px;
@@ -618,9 +726,9 @@ export default {
       line-height: 32px;
     }
     .clearTips{
+      margin: 10px 0 0 20px;
       font-size: 12px;
       color: #ff000088;
-      margin-left: 10px;
     }
   }
   .Tips{
@@ -628,5 +736,28 @@ export default {
     font-size: 12px;
     color: #ff000066;
   }
+  .update{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(7, 17, 27, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .wrapper{
+      background-color: #fff;
+      padding: 20px 50px 40px;
+      border-radius: 4px;
+      max-width: 500px;
+      max-height: 90%;
+      overflow: auto;
+      .footer{
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
 }
 </style>

src/components/Share.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="share" id="share" @click="shareClickEvent">
+  <div class="share" id="share" @click="shareClickEvent" v-clickoutside="shareClickEvent">
     <div class="left">
-      <img :src="pic" alt="" @load="picLoadEvent">
+      <img :src="share.info.pic" alt="">
     </div>
     <div class="right" id="right">
       <div class="title">{{ share.info.name }}</div>
-      <qrcode-vue id="qr" :value="link" :size="160" level="L" />
+      <qrcode-vue v-if="link !== ''" id="qr" :value="link" :size="160" level="L" />
       <div class="tips">
         <p>长按二维码，识别播放。</p>
         <p><img src="@/assets/image/logo.png"></p>
@@ -22,6 +22,7 @@ import { mapMutations } from 'vuex'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
 import zy from '../lib/site/tools'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 const { clipboard, nativeImage } = require('electron')
 export default {
   name: 'share',
@@ -44,6 +45,14 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
     }
   },
   watch: {
@@ -56,45 +65,44 @@ export default {
       deep: true
     }
   },
+  directives: {
+    Clickoutside
+  },
   methods: {
-    ...mapMutations(['SET_SHARE']),
+    ...mapMutations(['SET_SHARE', 'SET_DetailCache']),
     shareClickEvent () {
       this.share = {
         show: false,
         info: {}
       }
     },
-    getDetail () {
-      this.loading = true
+    async getUrl (index) {
       const id = this.share.info.ids || this.share.info.id
-      zy.detail(this.share.key, id).then(res => {
-        if (res) {
-          this.pic = res.pic
-          var m3u8List = {}
-          const dd = res.dl.dd
-          const type = Object.prototype.toString.call(dd)
-          if (type === '[object Array]') {
-            for (const i of dd) {
-              if (i._flag.indexOf('m3u8') >= 0) {
-                m3u8List = i._t.split('#')
-              }
-            }
-          } else {
-            m3u8List = dd._t.split('#')
-          }
-          const url = m3u8List[1]
-          this.link = 'http://zyplayer.fun/player/player.html?url=' + url + '&title=' + this.share.info.name
-        }
-        this.loading = false
-      })
+      const cacheKey = this.share.key + '@' + id
+      let res = this.DetailCache[cacheKey]
+      if (!this.DetailCache[cacheKey]) {
+        res = await zy.detail(this.share.key, id)
+        this.DetailCache[cacheKey] = res
+      }
+      if (res) {
+        const url = res.fullList[0].list[index]
+        return url.includes('$') ? url.split('$')[1] : url
+      }
     },
-    picLoadEvent () {
-      const dom = document.getElementById('right')
-      html2canvas(dom, { useCORS: true, allowTaint: true }).then(res => {
-        const png = res.toDataURL('image/png')
-        const p = nativeImage.createFromDataURL(png)
-        clipboard.writeImage(p)
-        this.$message.success('已复制到剪贴板，快去分享吧~ 严禁传播违法资源!!!')
+    async getDetail () {
+      this.loading = true
+      const index = this.share.index || 0
+      const url = await this.getUrl(index)
+      this.link = 'http://hunlongyu.gitee.io/zy-player-web?url=' + url + '&name=' + this.share.info.name
+      this.loading = false
+      this.$nextTick(() => {
+        const dom = document.getElementById('share')
+        html2canvas(dom, { useCORS: true }).then(res => {
+          const png = res.toDataURL('image/png')
+          const p = nativeImage.createFromDataURL(png)
+          clipboard.writeImage(p)
+          this.$message.success('已复制到剪贴板，快去分享吧~ 严禁传播违法资源!!!')
+        })
       })
     }
   },

src/components/Star.vue

@@ -1,69 +1,165 @@
 <template>
-  <div class="star">
-    <div class="body">
-      <div class="zy-table">
-        <div class="tHeader">
-          <span class="btn" @click="updateAllEvent(list)">同步所有收藏</span>
-        </div>
-        <div class="tBody zy-scroll">
-          <ul>
-            <li v-show="this.list.length > 0">
-              <span class="name">名字</span>
-              <span class="type">类型</span>
-              <span class="time">上映</span>
-              <span class="site">片源</span>
-              <span class="note">备注</span>
-              <span class="note">观看至</span>
-              <span class="operate">
-                <span class="btn"></span>
-                <span class="btn"></span>
-                <span class="btn"></span>
-                <span class="btn"></span>
-                <span class="btn"></span>
-              </span>
-            </li>
-            <draggable v-model="list" @change="listUpdatedEvent">
-              <transition-group>
-                <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)" :class="[i.hasUpdate ? 'zy-highlighted': '']">
-                  <span class="name">{{i.name}}</span>
-                  <span class="type">{{i.type}}</span>
-                  <span class="time">{{i.year}}</span>
-                  <span class="site">{{getSiteName(i.key)}}</span>
-                  <span class="note">{{i.note}}</span>
-                  <span class="note">{{getHistoryNote(i.index)}}</span>
-                  <span class="operate">
-                    <span class="btn" @click.stop="playEvent(i)">播放</span>
-                     <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                    <span class="btn" @click.stop="updateEvent(i)">同步</span>
-                    <span class="btn" @click.stop="downloadEvent(i)">下载</span>
-                    <span class="btn" @click.stop="deleteEvent(i)">删除</span>
+  <div class="listpage" id="star">
+    <div class="listpage-header" id="star-header">
+        <el-switch v-model="setting.starViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2" title="导出全部，自动添加扩展名">导出</el-button>
+        <el-button @click.stop="importFavoritesEvent" icon="el-icon-download" title="支持同时导入多个文件">导入</el-button>
+        <el-button @click.stop="removeSelectedItems" icon="el-icon-delete-solid">{{ multipleSelection.length === 0 ? "清空" : "删除所选" }}</el-button>
+        <el-button @click.stop="updateAllEvent" icon="el-icon-refresh">同步所有收藏</el-button>
+    </div>
+    <div class="listpage-body" id="star-body">
+      <div class="show-table" id="star-table"  v-if="setting.starViewMode === 'table'">
+        <el-table size="mini" fit height="100%" row-key="id"
+          ref="starTable"
+          :data="list"
+          :cell-class-name="checkUpdate"
+          @row-click="detailEvent"
+          @sort-change="handleSortChange"
+          @select="selectionCellClick"
+          @selection-change="handleSelectionChange">
+          <el-table-column
+            type="selection">
+          </el-table-column>
+          <el-table-column
+            sortable
+            :sort-method="(a , b) => sortByLocaleCompare(a.name, b.name)"
+            prop="name"
+            label="片名">
+          </el-table-column>
+          <el-table-column
+            prop="site.name"
+            width="120"
+            label="源站">
+            <template slot-scope="scope">
+              <span>{{ getSiteName(scope.row) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            :sort-method="(a , b) => sortByLocaleCompare(a.detail.type, b.detail.type)"
+            prop="detail.type"
+            label="类型"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            sortable
+            :sort-by="['detail.year', 'name']"
+            prop="detail.year"
+            label="上映"
+            width="100">
+          </el-table-column>
+          <el-table-column v-if="list.some(e => e.detail.note)"
+            prop="detail.note"
+            width="120"
+            label="备注">
+          </el-table-column>
+          <el-table-column v-if="list.some(e => e.rate && e.rate !== '暂无评分')"
+            sortable
+            sort-by="rate"
+            prop="rate"
+            width="120"
+            align="center"
+            label="豆瓣评分">
+          </el-table-column>
+          <el-table-column v-if="list.some(e => e.index >= 0)"
+            prop="index"
+            width="120"
+            label="观看至">
+            <template slot-scope="scope">
+              <span>{{ getHistoryNote(scope.row.index) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            header-align="center"
+            align="right"
+            width="200">
+            <template slot-scope="scope">
+              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
+              <el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
+              <el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
+              <el-button @click.stop="deleteEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="show-picture" id="star-picture" v-if="setting.starViewMode === 'picture'">
+        <Waterfall ref="starWaterfall" :list="list" :gutter="20" :width="240"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
+          animationEffect="fadeIn"
+          backgroundColor="rgba(0, 0, 0, 0)">
+            <template slot="item" slot-scope="props">
+              <div class="card">
+                <div class="img">
+                  <div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
+                    <span>{{props.data.rate}}分</span>
+                  </div>
+                  <div class="update" v-if="props.data.hasUpdate">
+                    <span>有更新</span>
+                  </div>
+                  <div class="progress" v-if="props.data.index && props.data.detail && props.data.detail.fullList[0].list !== undefined && props.data.detail.fullList[0].list.length > 1">
+                  <span>
+                    看至第{{ props.data.index + 1 }}集
                   </span>
-                </li>
-              </transition-group>
-            </draggable>
-          </ul>
-        </div>
+                  </div>
+                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.starWaterfall.refresh()" @click="detailEvent(props.data)">
+                  <div class="operate">
+                    <div class="operate-wrap">
+                      <span class="o-play" @click="playEvent(props.data)">播放</span>
+                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
+                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="info">
+                  <span>{{props.data.detail.area}}</span>
+                  <span>{{props.data.detail.year}}</span>
+                  <span>{{props.data.detail.note}}</span>
+                  <span>{{props.data.detail.type}}</span>
+                </div>
+              </div>
+            </template>
+        </Waterfall>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { star, history, sites } from '../lib/dexie'
+import { history, star, sites, setting } from '../lib/dexie'
 import zy from '../lib/site/tools'
-import draggable from 'vuedraggable'
-
+import { remote } from 'electron'
+import fs from 'fs'
+import Sortable from 'sortablejs'
+import Waterfall from 'vue-waterfall-plugin'
 const { clipboard } = require('electron')
 export default {
   name: 'star',
   data () {
     return {
       list: [],
-      sites: []
+      sites: [],
+      numNoUpdate: 0,
+      shiftDown: false,
+      selectionBegin: '',
+      selectionEnd: '',
+      multipleSelection: []
     }
   },
   components: {
-    draggable
+    Waterfall
   },
   computed: {
     view: {
@@ -97,16 +193,75 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
+    },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
     }
   },
   watch: {
     view () {
-      this.getStarList()
-      this.getAllsites()
+      if (this.view === 'Star') {
+        this.getAllsites()
+        this.getFavorites()
+        if (this.setting.starViewMode === 'table') this.showShiftPrompt()
+      }
+    },
+    numNoUpdate () {
+      // 如果所有收藏都没有更新的话
+      if (this.numNoUpdate === this.list.length) {
+        this.numNoUpdate = 0
+        this.$message.warning('未查询到任何更新')
+      }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
+    handleSortChange (column, prop, order) {
+      this.updateDatabase()
+    },
+    sortByLocaleCompare (a, b) {
+      return a.localeCompare(b, 'zh')
+    },
+    selectionCellClick (selection, row) { // 同history一样，逆序
+      if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) {
+        this.selectionEnd = row.id
+        const start = this.list.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd))
+        const end = this.list.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd))
+        const selections = this.list.slice(start, end + 1)
+        this.$nextTick(() => {
+          selections.forEach(e => this.$refs.starTable.toggleRowSelection(e, true))
+        })
+        this.selectionBegin = this.selectionEnd = ''
+        return
+      }
+      if (selection.includes(row)) {
+        this.selectionBegin = row.id
+      } else {
+        this.selectionBegin = ''
+      }
+    },
+    handleSelectionChange (rows) {
+      this.multipleSelection = rows
+    },
+    removeSelectedItems () {
+      if (!this.multipleSelection.length) this.multipleSelection = this.list
+      this.multipleSelection.forEach(e => star.remove(e.id))
+      this.getFavorites()
+      this.updateDatabase()
+    },
     detailEvent (e) {
       this.detail = {
         show: true,
@@ -120,14 +275,12 @@ export default {
         this.clearHasUpdateFlag(e)
       }
     },
-    playEvent (e) {
-      history.find({ site: e.key, ids: e.ids }).then(res => {
-        if (res) {
-          this.video = { key: e.key, info: { id: res.ids, name: res.name, index: res.index } }
-        } else {
-          this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 } }
-        }
-      })
+    async playEvent (e) {
+      if (e.index) {
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: e.index } }
+      } else {
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 } }
+      }
       if (e.hasUpdate) {
         this.clearHasUpdateFlag(e)
       }
@@ -137,119 +290,85 @@ export default {
       star.remove(e.id).then(res => {
         if (res) {
           this.$message.warning('删除失败')
-        } else {
-          this.$message.success('删除成功')
         }
-        this.getStarList()
+        this.getFavorites()
       })
     },
     shareEvent (e) {
       this.share = {
         show: true,
         key: e.key,
-        info: e
+        info: e.detail
       }
     },
-    clearHasUpdateFlag (e) {
-      star.find({ id: e.id }).then(res => {
-        res.hasUpdate = false
-        star.update(e.id, res)
-        this.getStarList()
-      })
+    checkUpdate ({ row, rowIndex }) {
+      if (this.list[rowIndex].hasUpdate) {
+        return 'highlight'
+      }
     },
-    listUpdatedEvent () {
-      star.clear().then(res1 => {
-        // 重新排序
-        var id = this.list.length
-        this.list.forEach(element => {
-          element.id = id
-          star.add(element)
-          id -= 1
-        })
-      })
+    async clearHasUpdateFlag (e) {
+      const db = await star.find({ id: e.id })
+      if (db) {
+        db.hasUpdate = false
+        star.update(e.id, db)
+        this.getFavorites()
+      }
     },
-    updateEvent (e) {
-      zy.detail(e.key, e.ids).then(res => {
-        var doc = {
-          key: e.key,
+    async updateEvent (e) {
+      try {
+        if (!this.DetailCache[e.key + '@' + e.ids]) {
+          this.DetailCache[e.key + '@' + e.ids] = await zy.detail(e.key, e.ids)
+        }
+        const doc = {
           id: e.id,
-          ids: res.id,
-          last: res.last,
-          name: res.name,
-          type: res.type,
-          year: res.year,
-          note: res.note
+          key: e.key,
+          ids: e.ids,
+          site: e.site,
+          name: e.name,
+          detail: this.DetailCache[e.key + '@' + e.ids],
+          index: e.index
         }
         star.get(e.id).then(resStar => {
-          doc.hasUpdate = resStar.hasUpdate
-          var msg = ''
-          if (e.last === res.last) {
-            msg = `同步"${e.name}"成功, 未查询到更新。`
-            this.$message.info(msg)
-          } else {
+          if (!e.hasUpdate && e.detail.last !== doc.detail.last) {
             doc.hasUpdate = true
-            msg = `同步"${e.name}"成功, 检查到更新。`
+            const msg = `同步"${e.name}"成功, 检查到更新。`
             this.$message.success(msg)
+          } else {
+            this.numNoUpdate += 1
           }
           star.update(e.id, doc)
-          this.getStarList()
+          this.getFavorites()
         })
-      }).catch(err => {
-        var msg = `同步"${e.name}"失败, 请重试。`
+      } catch (err) {
+        const msg = `同步"${e.name}"失败, 请重试。`
         this.$message.warning(msg, err)
-      })
+      }
     },
-    updateAllEvent (list) {
-      list.forEach(e => {
+    updateAllEvent () {
+      this.numNoUpdate = 0
+      this.list.forEach(e => {
         this.updateEvent(e)
       })
     },
-    downloadEvent (e) {
-      zy.download(e.key, e.ids).then(res => {
-        if (res && res.dl && res.dl.dd) {
-          const text = res.dl.dd._t
-          if (text) {
-            const list = text.split('#')
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-          } else {
-            this.$message.warning('没有查询到下载链接.')
-          }
-        } else {
-          var m3u8List = {}
-          zy.detail(e.key, e.ids).then(res => {
-            const dd = res.dl.dd
-            const type = Object.prototype.toString.call(dd)
-            if (type === '[object Array]') {
-              for (const i of dd) {
-                if (i._flag.indexOf('m3u8') >= 0) {
-                  m3u8List = i._t.split('#')
-                }
-              }
-            } else {
-              m3u8List = dd._t.split('#')
-            }
-            const list = [...m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
+    async downloadEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      let videoFlag
+      if (db) videoFlag = db.videoFlag
+      zy.download(e.key, e.ids, videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
-    getSiteName (key) {
-      var site = this.sites.find(e => e.key === key)
-      if (site) {
-        return site.name
+    getSiteName (row) {
+      if (row.site) {
+        return row.site.name
+      } else {
+        const site = this.sites.find(e => e.key === row.key)
+        if (site) {
+          return site.name
+        }
       }
     },
     getHistoryNote (index) {
@@ -259,35 +378,150 @@ export default {
         return ''
       }
     },
-    getStarList () {
+    getFavorites () {
       star.all().then(res => {
-        this.list = res.reverse()
+        this.list = res.sort(function (a, b) {
+          return b.id - a.id
+        })
       })
     },
     getAllsites () {
       sites.all().then(res => {
         this.sites = res
       })
+    },
+    exportFavoritesEvent () {
+      const arr = [...this.list]
+      const str = JSON.stringify(arr, null, 2)
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] }
+        ]
+      }
+      remote.dialog.showSaveDialog(options).then(result => {
+        if (!result.canceled) {
+          if (!result.filePath.endsWith('.json')) result.filePath += '.json'
+          fs.writeFileSync(result.filePath, str)
+          this.$message.success('导出收藏成功')
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    importFavoritesEvent () {
+      const options = {
+        filters: [
+          { name: 'JSON file', extensions: ['json'] }
+        ],
+        properties: ['openFile', 'multiSelections']
+      }
+      remote.dialog.showOpenDialog(options).then(result => {
+        if (!result.canceled) {
+          const starList = Array.from(this.list)
+          let id = this.list.length + 1
+          result.filePaths.forEach(file => {
+            const str = fs.readFileSync(file)
+            const json = JSON.parse(str)
+            json.reverse().forEach(ele => {
+              const starExists = starList.some(x => x.key === ele.key && x.ids === ele.ids)
+              if (!starExists) {
+                const newDetail = {
+                  director: ele.director,
+                  actor: ele.actor,
+                  type: ele.type,
+                  area: ele.area,
+                  lang: ele.lang,
+                  year: ele.year,
+                  last: ele.last,
+                  note: ele.note
+                }
+                const doc = {
+                  id: id,
+                  key: ele.key,
+                  ids: ele.ids,
+                  site: ele.site === undefined ? ele.site = this.sites.find(x => x.key === ele.key) : ele.site,
+                  name: ele.name,
+                  hasUpdate: ele.hasUpdate,
+                  index: ele.index,
+                  rate: ele.rate,
+                  detail: ele.detail === undefined ? newDetail : ele.detail
+                }
+                id += 1
+                starList.push(doc)
+              }
+            })
+          })
+          star.clear().then(star.bulkAdd(starList).then(res => {
+            this.getFavorites()
+            this.$message.success('导入收藏成功')
+          }))
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    syncTableData () {
+      if (this.$refs.starTable.tableData && this.$refs.starTable.tableData.length === this.list.length) {
+        this.list = this.$refs.starTable.tableData
+      }
+    },
+    updateDatabase () {
+      this.syncTableData()
+      star.clear().then(res => {
+        let id = this.list.length
+        this.list.forEach(ele => {
+          ele.id = id
+          id -= 1
+        })
+        star.bulkAdd(this.list)
+      })
+    },
+    rowDrop () {
+      if (!document.getElementById('star-table')) return
+      const tbody = document.getElementById('star-table').querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd ({ newIndex, oldIndex }) {
+          const currRow = _this.list.splice(oldIndex, 1)[0]
+          _this.list.splice(newIndex, 0, currRow)
+          _this.updateDatabase()
+        }
+      })
+    },
+    updateViewMode () {
+      if (this.setting.starViewMode === 'table') {
+        setTimeout(() => { this.rowDrop() }, 100)
+        this.showShiftPrompt()
+      } else {
+        setTimeout(() => { if (this.$refs.starWaterfall) this.$refs.starWaterfall.refresh() }, 700)
+      }
+      setting.find().then(res => {
+        res.starViewMode = this.setting.starViewMode
+        setting.update(res)
+      })
+    },
+    showShiftPrompt () {
+      if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+      if (this.setting.shiftTooltipLimitTimes) {
+        this.$message.info('多选时支持shift快捷键')
+        this.setting.shiftTooltipLimitTimes--
+        setting.find().then(res => {
+          res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+          setting.update(res)
+        })
+      }
     }
   },
   created () {
-    this.getStarList()
-    window.Sortable = require('sortablejs').Sortable
+    this.getFavorites()
+  },
+  mounted () {
+    if (this.setting.starViewMode === 'table') setTimeout(() => { this.rowDrop() }, 100)
+    addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true })
+    addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false })
+    addEventListener('resize', () => {
+      setTimeout(() => { if (this.$refs.starWaterfall) this.$refs.starWaterfall.resize() }, 500)
+    })
   }
 }
 </script>
-<style lang="scss" scoped>
-.star{
-  position: relative;
-  height: calc(100% - 40px);
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  .body{
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/register.js

@@ -9,7 +9,8 @@ import Detail from './Detail'
 import Share from './Share'
 import History from './History'
 import EditSites from './EditSites'
-
+import IPTV from './IPTV'
+import Recommendation from './Recommendation'
 export default {
   registerComponents () {
     Vue.component('Aside', Aside)
@@ -22,5 +23,7 @@ export default {
     Vue.component('Share', Share)
     Vue.component('History', History)
     Vue.component('EditSites', EditSites)
+    Vue.component('IPTV', IPTV)
+    Vue.component('Recommendation', Recommendation)
   }
 }

src/lib/dexie/channelList.js

@@ -0,0 +1,25 @@
+import db from './dexie'
+const { channelList } = db
+export default {
+  async all () {
+    return await channelList.toArray()
+  },
+  async clear () {
+    return await channelList.clear()
+  },
+  async add (doc) {
+    return await channelList.add(doc)
+  },
+  async bulkAdd (doc) {
+    return await channelList.bulkAdd(doc)
+  },
+  async find (doc) {
+    return await channelList.get(doc)
+  },
+  async update (id, docs) {
+    return await channelList.update(id, docs)
+  },
+  async remove (id) {
+    return await channelList.delete(id)
+  }
+}

src/lib/dexie/dexie.js

@@ -1,22 +1,70 @@
 import Dexie from 'dexie'
-import { setting, sites, localKey } from './initData'
+import { setting, sites, localKey, iptv, recommendations } from './initData'
 
 const db = new Dexie('zy')
 
-db.version(3).stores({
+db.version(4).stores({
   search: '++id, keywords',
-  setting: 'id, theme, site, shortcut, view',
+  setting: 'id, theme, site, shortcut, view, volume, externalPlayer, searchGroup, excludeRootClasses, excludeR18Films, forwardTimeInSec, starViewMode, recommandationViewMode, searchViewMode, password, proxy, allowPassWhenIptvCheck, autocleanWhenIptvCheck',
   shortcut: 'name, key, desc',
-  star: '++id, site, ids, name, type, year, index',
-  sites: '++id, key, name, json, xml, down, level',
-  history: '++id, site, ids, name, type, year, index, time',
-  mini: 'id, site, ids, name, index, time'
+  star: '++id, [key+ids], site, name, detail, index, rate, hasUpdate',
+  recommendation: '++id, [key+ids], site, name, detail, index, rate, hasUpdate',
+  sites: '++id, key, name, api, download, isActive, group',
+  history: '++id, [site+ids], name, type, year, index, time, duration, detail',
+  mini: 'id, bounds',
+  iptv: '++id, name, url, isActive',
+  channelList: '++id, name, prefer, channels, group, isActive'
+})
+
+// 开发和稳定版同一版本号会有不同的数据库
+// 参考https://github.com/dfahlander/Dexie.js/releases/tag/v3.0.0-alpha.3  upgrade可以改变主键和表名了
+// https://dexie.org/docs/Version/Version.stores()
+// https://dexie.org/docs/Version/Version.upgrade()
+// https://ahuigo.github.io/b/ria/js-indexedDB#/  比较旧，适当参考
+db.version(5).stores({
+  shortcut: null
+})
+
+db.version(6).stores({
+  shortcut: '++id, name, key, desc'
+}).upgrade(async tx => {
+  await tx.shortcut.bulkAdd(localKey)
+})
+
+db.version(7).stores({
+  sites: '++id, key, name, api, download, jiexiUrl, isActive, group',
+  history: '++id, [site+ids], name, type, year, index, time, duration, detail, onlinePlay'
+}).upgrade(trans => {
+  trans.sites.toCollection().modify(site => {
+    site.jiexiUrl = ''
+  })
+  trans.history.toCollection().modify(record => {
+    record.detail.fullList = [].concat(record.detail.m3u8List)
+    delete record.detail.m3u8List
+  })
+  trans.star.toCollection().modify(favorite => {
+    favorite.detail.fullList = [].concat(favorite.detail.m3u8List)
+    delete favorite.detail.m3u8List
+  })
+})
+
+db.version(8).stores({
+}).upgrade(trans => {
+  trans.sites.toCollection().modify(site => {
+    if (site.api.includes('7kjx.com')) site.jiexiUrl = 'default'
+  })
+  trans.setting.toCollection().modify(setting => {
+    setting.waitingTimeInSec = 15
+    setting.autoChangeSourceWhenIptvStalling = true
+  })
 })
 
 db.on('populate', () => {
   db.setting.bulkAdd(setting)
   db.sites.bulkAdd(sites)
   db.shortcut.bulkAdd(localKey)
+  db.iptv.bulkAdd(iptv)
+  db.recommendation.bulkAdd(recommendations)
 })
 
 db.open()

src/lib/dexie/history.js

@@ -4,8 +4,11 @@ export default {
   async add (doc) {
     return await history.add(doc)
   },
+  async bulkAdd (doc) {
+    return await history.bulkAdd(doc)
+  },
   async find (doc) {
-    return await history.get(doc)
+    return await history.where(doc).first()
   },
   async update (id, docs) {
     return await history.update(id, docs)

src/lib/dexie/index.js

@@ -5,6 +5,9 @@ import shortcut from './shortcut'
 import star from './star'
 import sites from './sites'
 import search from './search'
+import iptv from './iptv'
+import channelList from './channelList'
+import recommendation from './recommendation'
 
 export {
   history,
@@ -13,5 +16,8 @@ export {
   shortcut,
   star,
   sites,
-  search
+  iptv,
+  channelList,
+  search,
+  recommendation
 }

src/lib/dexie/iniData/Iptv.json

@@ -0,0 +1 @@
+[]

src/lib/dexie/iniData/Sites.json

@@ -0,0 +1 @@
+[]

src/lib/dexie/initData.js

@@ -2,180 +2,28 @@ const setting = [
   {
     id: 0,
     theme: 'light',
-    site: 'zuidazy',
     shortcut: true,
-    view: 'picture'
-  }
-]
-
-const sites = [
-  {
-    id: 1,
-    key: 'okzy',
-    name: 'OK 资源网',
-    api: 'http://cj.okzy.tv/inc/api.php',
-    download: 'http://cj.okzy.tv/inc/apidown.php'
-  },
-  {
-    id: 2,
-    key: 'zuidazy',
-    name: '最大资源网',
-    api: 'http://www.zdziyuan.com/inc/api.php',
-    download: 'http://www.zdziyuan.com/inc/apidown.php'
-  },
-  {
-    id: 3,
-    key: 'doubanzy',
-    name: '豆瓣电影资源',
-    api: 'http://v.1988cj.com/inc/api.php',
-    download: 'http://v.1988cj.com/inc/apidown.php'
-  },
-  {
-    id: 4,
-    key: '135zy',
-    name: '135 资源网',
-    api: 'http://cj.zycjw1.com/inc/api.php',
-    download: 'http://cj.zycjw1.com/inc/apidown.php'
-  },
-  {
-    id: 5,
-    key: 'kuyunzy',
-    name: '酷云资源',
-    api: 'http://caiji.kuyun98.com/inc/ldg_api.php',
-    download: 'http://caiji.kuyun98.com/inc/apidown.php'
-  },
-  {
-    id: 6,
-    key: 'mgtvzy',
-    name: '芒果 TV 资源网',
-    api: 'https://api.shijiapi.com/api.php/provide/vod/at/xml/',
-    download: ''
-  },
-  {
-    id: 7,
-    key: 'subo988',
-    name: '速播资源站',
-    api: 'https://www.subo988.com/inc/api.php',
-    download: ''
-  },
-  {
-    id: 8,
-    key: '209zy',
-    name: '209 资源',
-    api: 'http://cj.1156zy.com/inc/api.php',
-    download: ''
-  },
-  {
-    id: 9,
-    key: 'zuixinzy',
-    name: '最新资源',
-    api: 'http://api.zuixinapi.com/inc/api.php',
-    download: ''
-  },
-  {
-    id: 10,
-    key: 'kubozy',
-    name: '酷播资源',
-    api: 'http://api.kbzyapi.com/inc/api.php',
-    download: ''
-  },
-  {
-    id: 11,
-    key: 'yongjiuzy',
-    name: '永久资源',
-    api: 'http://cj.yongjiuzyw.com/inc/api.php',
-    download: ''
-  },
-  {
-    id: 12,
-    key: '123ku',
-    name: '123 资源',
-    api: 'http://cj.123ku2.com:12315/inc/api.php',
-    download: ''
-  },
-  {
-    id: 13,
-    key: '88zyw',
-    name: '88 影视资源站',
-    api: 'http://www.88zyw.net/inc/api.php',
-    download: ''
-  },
-  {
-    id: 14,
-    key: 'wolongzy',
-    name: '卧龙资源',
-    api: 'http://cj.wlzy.tv/inc/api_mac.php',
-    download: ''
-  },
-  {
-    id: 15,
-    key: 'mahuazy',
-    name: '麻花资源',
-    api: 'https://www.mhapi123.com/inc/api.php',
-    download: ''
-  },
-  {
-    id: 16,
-    key: 'kkzy',
-    name: '快快资源',
-    api: 'https://api.kkzy.tv/inc/api.php',
-    download: ''
-  },
-  {
-    id: 17,
-    key: '158zy',
-    name: '壹伍捌资源网',
-    api: 'http://cj.158zyz.net:158/inc/api.php',
-    download: ''
-  },
-  {
-    id: 18,
-    key: 'rrzy',
-    name: '人人资源',
-    api: 'https://www.rrzyw.cc/api.php/provide/vod/from/rrm3u8/at/xml/',
-    download: ''
-  },
-  {
-    id: 19,
-    key: 'mokazy',
-    name: '魔卡资源网',
-    api: 'https://cj.heiyap.com/api.php/provide/vod/at/xml/',
-    download: ''
-  },
-  {
-    id: 20,
-    key: 'kyzy',
-    name: '快影资源站',
-    api: 'https://www.kyzy.tv/api.php/kyyun/vod/at/xml/',
-    download: ''
-  },
-  {
-    id: 21,
-    key: 'solezy',
-    name: '搜乐资源网',
-    api: 'https://www.caijizy.vip/api.php/provide/vod/at/xml/',
-    download: ''
-  },
-  {
-    id: 22,
-    key: 'bbkdj',
-    name: '步步高顶尖资源网',
-    api: 'http://api.bbkdj.com/api',
-    download: ''
-  },
-  {
-    id: 23,
-    key: '1886zy',
-    name: '1886 资源',
-    api: 'http://cj.1886zy.co/inc/api.php',
-    download: ''
-  },
-  {
-    id: 24,
-    key: 'mbo',
-    name: '秒播资源',
-    api: 'http://caiji.mb77.vip/inc/api.php',
-    download: ''
+    view: 'picture',
+    externalPlayer: '',
+    searchGroup: '全站',
+    excludeRootClasses: true,
+    excludeR18Films: true,
+    forwardTimeInSec: 5,
+    waitingTimeInSec: 15,
+    starViewMode: 'picture',
+    recommendationViewMode: 'picture',
+    historyViewMode: 'picture',
+    searchViewMode: 'picture',
+    password: '',
+    proxy: {
+      type: 'none',
+      scheme: '',
+      url: '',
+      port: ''
+    },
+    allowPassWhenIptvCheck: true,
+    autocleanWhenIptvCheck: false,
+    autoChangeSourceWhenIptvStalling: true
   }
 ]
 
@@ -222,7 +70,7 @@ const localKey = [
   },
   {
     name: 'escape',
-    desc: '退出全屏',
+    desc: '退出全屏/精简模式',
     key: 'esc'
   },
   {
@@ -245,6 +93,21 @@ const localKey = [
     desc: '跳到视频结束位置',
     key: 'end'
   },
+  {
+    name: 'startPosition',
+    desc: '标记片头',
+    key: 'ctrl+home'
+  },
+  {
+    name: 'endPosition',
+    desc: '标记片尾',
+    key: 'ctrl+end'
+  },
+  {
+    name: 'clearPosition',
+    desc: '清除标记',
+    key: 'ctrl+del'
+  },
   {
     name: 'opacityUp',
     desc: '透明度调高',
@@ -269,6 +132,11 @@ const localKey = [
     name: 'mini',
     desc: '进入或退出mini模式',
     key: 'alt+m'
+  },
+  {
+    name: 'resetMini',
+    desc: '重置mini窗口',
+    key: 'ctrl+0'
   }
 ]
 
@@ -280,9 +148,14 @@ const getSite = (key) => {
   }
 }
 
+const sites = require('./iniData/Sites.json')
+const iptv = require('./iniData/Iptv.json')
+const recommendations = require('./iniData/Recommendations.json')
 export {
   setting,
   sites,
+  iptv,
+  recommendations,
   localKey,
   getSite
 }

src/lib/dexie/iptv.js

@@ -0,0 +1,25 @@
+import db from './dexie'
+const { iptv } = db
+export default {
+  async all () {
+    return await iptv.toArray()
+  },
+  async clear () {
+    return await iptv.clear()
+  },
+  async add (doc) {
+    return await iptv.add(doc)
+  },
+  async bulkAdd (doc) {
+    return await iptv.bulkAdd(doc)
+  },
+  async find (doc) {
+    return await iptv.get(doc)
+  },
+  async update (id, docs) {
+    return await iptv.update(id, docs)
+  },
+  async remove (id) {
+    return await iptv.delete(id)
+  }
+}

src/lib/dexie/recommendation.js

@@ -0,0 +1,28 @@
+import db from './dexie'
+const { recommendation } = db
+export default {
+  async add (doc) {
+    return await recommendation.add(doc)
+  },
+  async bulkAdd (doc) {
+    return await recommendation.bulkAdd(doc)
+  },
+  async find (doc) {
+    return await recommendation.where(doc).first()
+  },
+  async update (id, docs) {
+    return await recommendation.update(id, docs)
+  },
+  async all () {
+    return await recommendation.toArray()
+  },
+  async remove (id) {
+    return await recommendation.delete(id)
+  },
+  async get (id) {
+    return await recommendation.get(id)
+  },
+  async clear () {
+    return await recommendation.clear()
+  }
+}

src/lib/dexie/star.js

@@ -8,7 +8,7 @@ export default {
     return await star.bulkAdd(doc)
   },
   async find (doc) {
-    return await star.get(doc)
+    return await star.where(doc).first()
   },
   async update (id, docs) {
     return await star.update(id, docs)

src/lib/element/index.js

@@ -1,3 +1,23 @@
 import Vue from 'vue'
-import { Message } from 'element-ui'
+import { Message, Button, Table, TableColumn, Tag, Input, InputNumber, Dialog, Form, FormItem, Switch, Select, Option, Checkbox, Autocomplete, Col, Tree, Divider, Progress } from 'element-ui'
+import Plugin from 'v-fit-columns'
+Vue.use(Button)
+Vue.use(Col)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(Tag)
+Vue.use(Input)
+Vue.use(InputNumber)
+Vue.use(Dialog)
+Vue.use(Form)
+Vue.use(FormItem)
+Vue.use(Switch)
+Vue.use(Plugin)
+Vue.use(Select)
+Vue.use(Option)
+Vue.use(Checkbox)
+Vue.use(Autocomplete)
+Vue.use(Tree)
+Vue.use(Divider)
+Vue.use(Progress)
 Vue.prototype.$message = Message

src/lib/site/onlineVideo.js

@@ -0,0 +1,317 @@
+import open from 'open'
+import axios from 'axios'
+import cheerio from 'cheerio'
+
+const onlineVideo = {
+  playVideoOnline (selectedOnlineSite, videoName, videoIndex) {
+    switch (selectedOnlineSite) {
+      case '哔嘀':
+        onlineVideo.playVideoOnBde4(videoName, videoIndex)
+        break
+      case '1080影视':
+        onlineVideo.playVideoOnK1080(videoName, videoIndex)
+        break
+      case '素白白':
+        onlineVideo.playVideoOnSubaibai(videoName, videoIndex)
+        break
+      case '哆咪动漫':
+        onlineVideo.playVideoOndmdm2020(videoName, videoIndex)
+        break
+      case '樱花动漫':
+        onlineVideo.playVideoOnYhdm(videoName, videoIndex)
+        break
+      case '简影':
+        onlineVideo.playVideoOnSyrme(videoName, videoIndex)
+        break
+      case '极品':
+        onlineVideo.playVideoOnJpysvip(videoName, videoIndex)
+        break
+      case '喜欢看':
+        onlineVideo.playVideoOnXhkan(videoName, videoIndex)
+        break
+      default:
+        this.$message.console.error(`不支持该网站：${this.selectedOnlineSite}`)
+    }
+  },
+  playVideoOnBde4 (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `https://bde4.com/search/${videoName}`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('div.search-list')
+      var searchResult = $(e).find('div>div>div>div>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).attr('title')
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        var detailPageFullLink = 'https://bde4.com/' + detailPageLink
+        // 解析详情页面
+        axios.get(detailPageFullLink).then(res => {
+          const $ = cheerio.load(res.data)
+          var e = $('div.info1')
+          var videoList = $(e).find('a').toArray()
+          var videoFullLink = detailPageFullLink
+          // 获取index视频链接
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            if (indexVideoLink.includes('.htm')) {
+              videoFullLink = 'https://bde4.com' + indexVideoLink
+            }
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOnK1080 (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `https://k1080.net/vodsearch123/-------------.html?wd=${videoName}&submit=`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('#searchList')
+      var searchResult = $(e).find('li>div>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).attr('title')
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = 'https://k1080.net' + detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('#playlist1')
+          // 获取所有视频链接
+          var videoList = $(e).find('div>ul>li>a').toArray()
+          var videoFullLink = detailPageFullLink
+          // 获取index视频链接
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            if (indexVideoLink.includes('.htm')) {
+              videoFullLink = 'https://k1080.net' + indexVideoLink
+            }
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOnSubaibai (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `https://www.subaibai.com/xssearch?q=${videoName}`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('div.search_list')
+      var searchResult = $(e).find('div>ul>li>h3>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).text()
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('div.paly_list_btn')
+          // 获取所有视频链接
+          var videoList = $(e).find('a').toArray()
+          // 获取index视频链接
+          var videoFullLink = detailPageFullLink
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            if (indexVideoLink.includes('.htm')) {
+              videoFullLink = indexVideoLink
+            }
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOnYhdm (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `http://www.yhdm.tv/search/${videoName}`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('div.lpic')
+      var searchResult = $(e).find('div>ul>li>h2>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).attr('title')
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = 'http://www.yhdm.tv/' + detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('div.movurl')
+          // 获取所有视频链接
+          var videoList = $(e).find('div>ul>li>a').toArray()
+          // 获取index视频链接
+          var videoFullLink = detailPageFullLink
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            if (indexVideoLink.includes('.htm')) {
+              videoFullLink = 'http://www.yhdm.tv/' + indexVideoLink
+            }
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOndmdm2020 (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `http://www.dmdm2020.com/dongmansearch.html?wd=${videoName}&submit=`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('#searchList')
+      var searchResult = $(e).find('ul>li>div>h4>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).text()
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = 'http://www.dmdm2020.com' + detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('#playlist1')
+          // 获取所有视频链接
+          var videoList = $(e).find('div>ul>li>a').toArray()
+          // 获取index视频链接
+          var videoFullLink = detailPageFullLink
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            if (indexVideoLink.includes('.htm')) {
+              videoFullLink = 'http://www.dmdm2020.com' + indexVideoLink
+            }
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOnSyrme (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `https://syrme.top/searchs?q=${videoName}`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('ul.MovieList')
+      var searchResult = $(e).find('ul>li>article>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).find('a>h2').text()
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = 'https://syrme.top' + detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('#categories-2')
+          // 获取所有视频链接
+          var videoList = $(e).find('div>ul>li>a').toArray()
+          // 获取index视频链接
+          var videoFullLink = detailPageFullLink
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            videoFullLink = 'https://syrme.top' + indexVideoLink
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOnJpysvip (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `https://www.jpysvip.net/vodsearch/-------------.html?wd=${videoName}&submit=`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('#searchList')
+      var searchResult = $(e).find('ul>li>div>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).attr('title')
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = 'https://www.jpysvip.net' + detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('#playlist1')
+          // 获取所有视频链接
+          var videoList = $(e).find('div>ul>li>a').toArray()
+          // 获取index视频链接
+          var videoFullLink = detailPageFullLink
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            videoFullLink = 'https://www.jpysvip.net/' + indexVideoLink
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  },
+  playVideoOnXhkan (videoName, videoIndex) {
+    videoName = videoName.replace(/\s/g, '')
+    var url = `https://www.xhkan.com/vodsearch.html?wd=${videoName}&submit=`
+    axios.get(url).then(res => {
+      const $ = cheerio.load(res.data)
+      var e = $('#searchList')
+      var searchResult = $(e).find('ul>li>div>a').toArray()
+      // 获取第一个搜索结果的视频链接
+      var detailPageLink = $(searchResult[0]).attr('href')
+      // 获取第一个搜索结果的title
+      var title = $(searchResult[0]).attr('title')
+      if (title === null || title === undefined || !title.replace(/\s/g, '').includes(videoName)) {
+        // 如果第一个搜索结果不符合，打开搜索页面
+        open(url)
+      } else {
+        // 解析详情页面
+        var detailPageFullLink = detailPageLink
+        axios.get(detailPageFullLink).then(res2 => {
+          const $ = cheerio.load(res2.data)
+          // 获取playlist1
+          var e = $('#playlist1')
+          // 获取所有视频链接
+          var videoList = $(e).find('div>ul>li>a').toArray()
+          // 获取index视频链接
+          var videoFullLink = detailPageFullLink
+          if (videoIndex < videoList.length) {
+            var indexVideoLink = $(videoList[videoIndex]).attr('href')
+            videoFullLink = indexVideoLink
+          }
+          open(videoFullLink)
+        })
+      }
+    })
+  }
+}
+export default onlineVideo

src/lib/site/server.js

@@ -1,18 +0,0 @@
-import express from 'express'
-import cors from 'cors'
-const Axios = require('axios')
-
-const app = express()
-app.use(cors())
-app.use(express.json())
-app.use(express.urlencoded({ extended: true }))
-
-app.post('/api', async (req, res) => {
-  const result = await Axios.get(req.body.url)
-  res.json({
-    code: 1,
-    info: result.data
-  })
-})
-
-app.listen(44444)

src/lib/site/tools.js

@@ -1,8 +1,84 @@
-import { sites } from '../dexie'
+import { sites, setting } from '../dexie'
 import axios from 'axios'
 import parser from 'fast-xml-parser'
+import cheerio from 'cheerio'
+import { Parser as M3u8Parser } from 'm3u8-parser'
+// import FLVDemuxer from 'xgplayer-flv.js/src/flv/demux/flv-demuxer.js'
+import SocksProxyAgent from 'socks-proxy-agent'
+
+// axios使用系统代理  https://evandontje.com/2020/04/02/automatic-system-proxy-configuration-for-electron-applications/
+// xgplayer使用chromium代理设置，浏览器又默认使用系统代理 https://www.chromium.org/developers/design-documents/network-settings
+// 要在设置中添加代理设置，可参考https://stackoverflow.com/questions/37393248/how-connect-to-proxy-in-electron-webview
+const http = require('http')
+const https = require('http')
+const { remote } = require('electron')
+const win = remote.getCurrentWindow()
+const session = win.webContents.session
+const ElectronProxyAgent = require('electron-proxy-agent')
+const URL = require('url')
+const request = require('request')
+let proxyURL
+
+// 取消axios请求  浅析cancelToken https://juejin.cn/post/6844904168277147661 https://masteringjs.io/tutorials/axios/cancel
+// const source = axios.CancelToken.source()
+// const cancelToken = source.token
+
+// 请求超时时限
+// axios.defaults.timeout = 10000 // 可能使用代理，增长超时
+const TIMEOUT = 20000
+
+// 重试次数，共请求2次
+axios.defaults.retry = 1
+
+// 请求的间隙
+axios.defaults.retryDelay = 1000
+
+// 使用请求拦截器动态调整超时
+axios.interceptors.request.use(function (config) {
+  if (config.__retryCount === undefined) {
+    config.timeout = TIMEOUT
+  } else {
+    config.timeout = TIMEOUT * (config.__retryCount + 1)
+  }
+  return config
+}, function (err) {
+  return Promise.reject(err)
+})
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+  return response
+}, function (err) { // 请求错误时做些事
+  // 请求超时的之后，抛出 err.code = ECONNABORTED的错误..错误信息是 timeout of  xxx ms exceeded
+  if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
+    const config = err.config
+    config.__retryCount = config.__retryCount || 0
+
+    if (config.__retryCount >= config.retry) {
+      err.message = '多次请求均超时'
+      return Promise.reject(err)
+    }
+
+    config.__retryCount += 1
+
+    const backoff = new Promise(function (resolve) {
+      setTimeout(function () {
+        resolve()
+      }, config.retryDelay || 1)
+    })
+
+    return backoff.then(function () {
+      return axios(config)
+    })
+  } else {
+    if (err && !err.response) {
+      err.message = '连接服务器失败!'
+    }
+    return Promise.reject(err)
+  }
+})
+
 const zy = {
-  ports: 44444, // 端口号
   xmlConfig: { // XML 转 JSON 配置
     trimValues: true,
     textNodeName: '_t',
@@ -31,13 +107,14 @@ const zy = {
   class (key) {
     return new Promise((resolve, reject) => {
       this.getSite(key).then(res => {
-        const site = res
-        axios.post(`http://localhost:${this.ports}/api`, { url: site.api }).then(res => {
-          const data = res.data.info
+        const url = res.api
+        axios.get(url).then(res => {
+          const data = res.data
           const json = parser.parse(data, this.xmlConfig)
+          const jsondata = json.rss === undefined ? json : json.rss
           const arr = []
-          if (json.rss.class) {
-            for (const i of json.rss.class.ty) {
+          if (jsondata.class) {
+            for (const i of jsondata.class.ty) {
               const j = {
                 tid: i._id,
                 name: i._t
@@ -47,10 +124,10 @@ const zy = {
           }
           const doc = {
             class: arr,
-            page: json.rss.list._page,
-            pagecount: json.rss.list._pagecount,
-            pagesize: json.rss.list._pagesize,
-            recordcount: json.rss.list._recordcount
+            page: jsondata.list._page,
+            pagecount: jsondata.list._pagecount,
+            pagesize: jsondata.list._pagesize,
+            recordcount: jsondata.list._recordcount
           }
           resolve(doc)
         }).catch(err => {
@@ -76,11 +153,16 @@ const zy = {
         } else {
           url = `${site.api}?ac=videolist&pg=${pg}`
         }
-        axios.post(`http://localhost:${this.ports}/api`, { url: url }).then(async res => {
-          const data = res.data.info
+        axios.get(url).then(async res => {
+          const data = res.data
           const json = parser.parse(data, this.xmlConfig)
-          const videoList = json.rss.list.video
-          resolve(videoList)
+          const jsondata = json.rss === undefined ? json : json.rss
+          const videoList = jsondata.list.video
+          if (videoList && videoList.length) {
+            resolve(videoList)
+          } else {
+            resolve([])
+          }
         }).catch(err => {
           reject(err)
         })
@@ -103,14 +185,15 @@ const zy = {
         } else {
           url = `${site.api}?ac=videolist`
         }
-        axios.post(`http://localhost:${this.ports}/api`, { url: url }).then(async res => {
-          const data = res.data.info
+        axios.get(url).then(async res => {
+          const data = res.data.match(/<list [^>]*>/)[0] + '</list>' // 某些源站不含页码时获取到的数据parser无法解析
           const json = parser.parse(data, this.xmlConfig)
+          const jsondata = json.rss === undefined ? json : json.rss
           const pg = {
-            page: json.rss.list._page,
-            pagecount: json.rss.list._pagecount,
-            pagesize: json.rss.list._pagesize,
-            recordcount: json.rss.list._recordcount
+            page: jsondata.list._page,
+            pagecount: jsondata.list._pagecount,
+            pagesize: jsondata.list._pagesize,
+            recordcount: jsondata.list._recordcount
           }
           resolve(pg)
         }).catch(err => {
@@ -129,15 +212,26 @@ const zy = {
     return new Promise((resolve, reject) => {
       this.getSite(key).then(res => {
         const site = res
-        wd = encodeURI(wd)
-        axios.post(`http://localhost:${this.ports}/api`, { url: site.api + '?wd=' + wd }).then(res => {
-          const data = res.data.info
+        const url = `${site.api}?wd=${encodeURI(wd)}`
+        axios.get(url, { timeout: 3000 }).then(res => {
+          const data = res.data
           const json = parser.parse(data, this.xmlConfig)
-          const videoList = json.rss.list.video
-          resolve(videoList)
+          const jsondata = json.rss === undefined ? json : json.rss
+          if (json && jsondata && jsondata.list) {
+            let videoList = jsondata.list.video
+            if (Object.prototype.toString.call(videoList) === '[object Object]') videoList = [].concat(videoList)
+            videoList = videoList.filter(e => e.name.toLowerCase().includes(wd.toLowerCase()))
+            if (videoList.length) {
+              resolve(videoList)
+            } else {
+              resolve()
+            }
+          }
         }).catch(err => {
           reject(err)
         })
+      }).catch(err => {
+        reject(err)
       })
     })
   },
@@ -150,10 +244,56 @@ const zy = {
   detail (key, id) {
     return new Promise((resolve, reject) => {
       this.getSite(key).then(res => {
-        axios.post(`http://localhost:${this.ports}/api`, { url: res.api + '?ac=videolist&ids=' + id }).then(res => {
-          const data = res.data.info
+        const url = `${res.api}?ac=videolist&ids=${id}`
+        axios.get(url).then(res => {
+          const data = res.data
           const json = parser.parse(data, this.xmlConfig)
-          const videoList = json.rss.list.video
+          const jsondata = json.rss === undefined ? json : json.rss
+          const videoList = jsondata.list.video
+          // Parse video lists
+          let fullList = []
+          let index = 0
+          const supportedFormats = ['m3u8', 'mp4']
+          const dd = videoList.dl.dd
+          const type = Object.prototype.toString.call(dd)
+          if (type === '[object Array]') {
+            for (const i of dd) {
+              i._t = i._t.replace(/\$+/g, '$')
+              const ext = Array.from(new Set(...i._t.split('#').map(e => e.includes('$') ? e.split('$')[1].match(/\.\w+?$/) : e.match(/\.\w+?$/)))).map(e => e.slice(1))
+              if (ext.length && ext.length <= supportedFormats.length && ext.every(e => supportedFormats.includes(e))) {
+                if (ext.length === 1) {
+                  i._flag = ext[0]
+                } else {
+                  i._flag = index ? 'ZY支持-' + index : 'ZY支持'
+                  index++
+                }
+              }
+              fullList.push(
+                {
+                  flag: i._flag,
+                  list: i._t.split('#').filter(e => e && (e.startsWith('http') || (e.split('$')[1] && e.split('$')[1].startsWith('http'))))
+                }
+              )
+            }
+          } else {
+            fullList.push(
+              {
+                flag: dd._flag,
+                list: dd._t.replace(/\$+/g, '$').split('#').filter(e => e && (e.startsWith('http') || (e.split('$')[1] && e.split('$')[1].startsWith('http'))))
+              }
+            )
+          }
+          fullList.forEach(item => {
+            if (item.list.every(e => e.includes('$') && /^\s*\d+\s*$/.test(e.split('$')[0]))) item.list.sort((a, b) => { return a.split('$')[0] - b.split('$')[0] })
+          })
+          if (fullList.length > 1) { // 将ZY支持的播放列表前置
+            index = fullList.findIndex(e => supportedFormats.includes(e.flag) || e.flag.startsWith('ZY支持'))
+            if (index !== -1) {
+              const first = fullList.splice(index, 1)
+              fullList = first.concat(fullList)
+            }
+          }
+          videoList.fullList = fullList
           resolve(videoList)
         }).catch(err => {
           reject(err)
@@ -169,26 +309,218 @@ const zy = {
    * @param {*} id 资源唯一标识符 id
    * @returns
    */
-  download (key, id) {
+  download (key, id, videoFlag) {
     return new Promise((resolve, reject) => {
+      let info = ''
+      let downloadUrls = ''
       this.getSite(key).then(res => {
         const site = res
-        const url = site.download
-        if (url) {
-          axios.post(`http://localhost:${this.ports}/api`, { url: url + '?ac=videolist&ids=' + id + '&ct=1' }).then(res => {
-            const data = res.data.info
+        if (site.download) {
+          const url = `${site.download}?ac=videolist&ids=${id}&ct=1`
+          axios.get(url).then(res => {
+            const data = res.data
             const json = parser.parse(data, this.xmlConfig)
-            const videoList = json.rss.list.video
-            resolve(videoList)
-          }).catch(err => {
+            const jsondata = json.rss === undefined ? json : json.rss
+            const videoList = jsondata.list.video
+            const dd = videoList.dl.dd
+            const type = Object.prototype.toString.call(dd)
+            if (type === '[object Array]') {
+              for (const i of dd) {
+                downloadUrls = i._t.replace(/\$+/g, '$').split('#').map(e => encodeURI(e.includes('$') ? e.split('$')[1] : e)).join('\n')
+              }
+            } else {
+              downloadUrls = dd._t.replace(/\$+/g, '$').split('#').map(e => encodeURI(e.includes('$') ? e.split('$')[1] : e)).join('\n')
+            }
+            if (downloadUrls) {
+              info = '调用下载接口获取到的链接已复制, 快去下载吧!'
+              resolve({ downloadUrls: downloadUrls, info: info })
+            } else {
+              throw new Error()
+            }
+          }).catch((err) => {
+            err.info = '无法获取到下载链接，请通过播放页面点击“调试”按钮获取'
             reject(err)
           })
         } else {
-          resolve([])
+          zy.detail(key, id).then(res => {
+            const dl = res.fullList.find(e => e.flag === videoFlag) || res.fullList[0]
+            for (const i of dl.list) {
+              const url = encodeURI(i.includes('$') ? i.split('$')[1] : i)
+              downloadUrls += (url + '\n')
+            }
+            if (downloadUrls) {
+              info = '视频源链接已复制, 快去下载吧!'
+              resolve({ downloadUrls: downloadUrls, info: info })
+            } else {
+              throw new Error()
+            }
+          }).catch((err) => {
+            err.info = '无法获取到下载链接，请通过播放页面点击“调试”按钮获取'
+            reject(err)
+          })
         }
       })
     })
+  },
+  /**
+   * 检查资源
+   * @param {*} key 资源网 key
+   * @returns boolean
+   */
+  async check (key, id) {
+    try {
+      const cls = await this.class(key)
+      if (cls) {
+        return true
+      } else {
+        return false
+      }
+    } catch (e) {
+      return false
+    }
+  },
+  /**
+   * 检查直播源
+   * @param {*} channel 直播频道 url
+   * @returns boolean
+   */
+  checkChannel (url) {
+    return new Promise((resolve, reject) => {
+      const supportFormats = /\.(m3u8|flv)$/
+      const extRE = url.match(supportFormats) || new URL.URL(url).pathname.match(supportFormats)
+      if (extRE[1] === 'flv') {
+        const MAX_CONTENT_LENGTH = 2000 // axios配置maxContentLength不生效，先用request凑合
+        let receivedLength = 0
+        let options = { uri: url, gzip: true, timeout: 10000 }
+        if (proxyURL) {
+          if (proxyURL.startsWith('http')) options = Object.assign({ proxy: proxyURL }, options)
+          if (proxyURL.startsWith('socks5')) options = Object.assign({ agent: new SocksProxyAgent(proxyURL) }, options)
+        }
+        const req = request.get(options)
+          .on('data', (str) => {
+            receivedLength += str.length
+            if (receivedLength > MAX_CONTENT_LENGTH) {
+              resolve(true) // 应该用FLVDemuxer.probe来检测，先凑合
+              req.abort()
+            }
+          })
+          .on('error', function (err) {
+            resolve(false)
+            console.log(err)
+          })
+          .on('end', () => { resolve(false) })
+      } else if (extRE[1] === 'm3u8') {
+        axios.get(url).then(res => {
+          const manifest = res.data
+          const parser = new M3u8Parser()
+          parser.push(manifest)
+          parser.end()
+          const parsedManifest = parser.manifest
+          if (parsedManifest.segments.length) {
+            resolve(true)
+          } else {
+            resolve(false)
+          }
+        }).catch(e => {
+          resolve(false)
+        })
+      }
+    })
+  },
+  /**
+   * 获取豆瓣页面链接
+   * @param {*} name 视频名称
+   * @param {*} year 视频年份
+   * @returns 豆瓣页面链接，如果没有搜到该视频，返回搜索页面链接
+   */
+  doubanLink (name, year) {
+    return new Promise((resolve, reject) => {
+      // 豆瓣搜索链接
+      const nameToSearch = name.replace(/\s/g, '')
+      const doubanSearchLink = 'https://www.douban.com/search?q=' + nameToSearch
+      axios.get(doubanSearchLink).then(res => {
+        const $ = cheerio.load(res.data)
+        // 查询所有搜索结果, 看名字和年代是否相符
+        let link = ''
+        $('div.result').each(function () {
+          const linkInDouban = $(this).find('div>div>h3>a').first()
+          const nameInDouban = linkInDouban.text().replace(/\s/g, '')
+          const subjectCast = $(this).find('span.subject-cast').text()
+          if (nameToSearch === nameInDouban && subjectCast && subjectCast.includes(year)) {
+            link = linkInDouban.attr('href')
+          }
+        })
+        if (link) {
+          resolve(link)
+        } else {
+          // 如果没找到符合的链接，返回搜索页面
+          resolve(doubanSearchLink)
+        }
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  /**
+   * 获取豆瓣评分
+   * @param {*} name 视频名称
+   * @param {*} year 视频年份
+   * @returns 豆瓣评分
+   */
+  doubanRate (name, year) {
+    return new Promise((resolve, reject) => {
+      const nameToSearch = name.replace(/\s/g, '')
+      this.doubanLink(nameToSearch, year).then(link => {
+        if (link.includes('https://www.douban.com/search')) {
+          resolve('暂无评分')
+        } else {
+          axios.get(link).then(response => {
+            const parsedHtml = cheerio.load(response.data)
+            const rating = parsedHtml('body').find('#interest_sectl').first().find('strong').first()
+            if (rating.text()) {
+              resolve(rating.text().replace(/\s/g, ''))
+            } else {
+              resolve('暂无评分')
+            }
+          }).catch(err => {
+            reject(err)
+          })
+        }
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  get7kParseURL () {
+    return new Promise((resolve, reject) => {
+      axios.get('https://zy.7kjx.com/').then(res => {
+        const $ = cheerio.load(res.data)
+        const parseURL = $('body > div.container > div > div.stui-pannel > div.col-pd > p:contains("解析接口:")').first().find('a').text()
+        resolve(parseURL)
+      }).catch(err => { reject(err) })
+    })
+  },
+  proxy () {
+    return new Promise((resolve, reject) => {
+      setting.find().then(db => {
+        if (db && db.proxy && db.proxy.type === 'manual') {
+          if (db.proxy.scheme && db.proxy.url && db.proxy.port) {
+            proxyURL = db.proxy.scheme + '://' + db.proxy.url.trim() + ':' + db.proxy.port.trim()
+            session.setProxy({ proxyRules: proxyURL })
+            http.globalAgent = https.globalAgent = new ElectronProxyAgent(session)
+          }
+        } else {
+          proxyURL = ''
+          session.setProxy({ proxyRules: 'direct://' })
+          http.globalAgent = https.globalAgent = new ElectronProxyAgent(session)
+        }
+        // 不要删了，留着测试用
+        // axios.get('https://api.my-ip.io/ip').then(res => console.log(res))
+      })
+    })
   }
 }
 
+zy.proxy()
+
 export default zy

src/lib/update/update.js

@@ -0,0 +1,53 @@
+import { BrowserWindow, ipcMain } from 'electron'
+const { autoUpdater } = require('electron-updater')
+
+// electron-updater 增量更新时似乎无法显示进度
+export function initUpdater (win = BrowserWindow) {
+  autoUpdater.autoDownload = false
+  autoUpdater.autoInstallOnAppQuit = true
+
+  // 主进程监听检查更新事件
+  ipcMain.on('checkForUpdate', () => {
+    autoUpdater.checkForUpdates()
+  })
+
+  // 主进程监听开始下载事件
+  ipcMain.on('downloadUpdate', () => {
+    autoUpdater.downloadUpdate()
+  })
+
+  // 主进程监听退出并安装事件
+  ipcMain.on('quitAndInstall', () => {
+    autoUpdater.quitAndInstall()
+  })
+
+  // 开始检测是否有更新
+  autoUpdater.on('checking-for-update', () => {
+    win.webContents.send('checking-for-update')
+  })
+
+  // 检测到有可用的更新
+  autoUpdater.on('update-available', (info) => {
+    win.webContents.send('update-available', info)
+  })
+
+  // 没有检测到有可用的更新
+  autoUpdater.on('update-not-available', () => {
+    win.webContents.send('update-not-available')
+  })
+
+  // 更新出错
+  autoUpdater.on('update-error', err => {
+    win.webContents.send('update-error', err)
+  })
+
+  // 下载更新进度
+  autoUpdater.on('download-progress', (progressObj) => {
+    win.webContents.send('download-progress', progressObj)
+  })
+
+  // 下载完成
+  autoUpdater.on('update-downloaded', () => {
+    win.webContents.send('update-downloaded')
+  })
+}

src/main.js

@@ -4,6 +4,7 @@ import store from './store'
 import 'modern-normalize'
 import Register from './components/register'
 import './lib/element/index'
+
 Register.registerComponents()
 Vue.config.productionTip = false
 new Vue({

src/mini/Mini.vue

@@ -1,524 +0,0 @@
-<template>
-  <div class="mini">
-    <div class="top">
-      <div class="left">
-        <span class="title">
-          <span v-if="m3u8Arr.length > 1">『第 {{(video.index + 1)}} 集』</span>{{name}}
-        </span>
-        <span class="zy-svg" @click="prevEvent" v-show="video.index > 0">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="backIconTitle">
-            <title id="backIconTitle">上一集</title>
-            <path d="M14 14.74L21 19V5l-7 4.26V5L2 12l12 7v-4.26z"></path>
-          </svg>
-        </span>
-        <span class="zy-svg" @click="nextEvent" v-show="video.index < (m3u8Arr.length - 1)">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle">
-            <title id="forwardIconTitle">下一集</title>
-            <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
-          </svg>
-        </span>
-        <span class="opacity" v-show="opacity !== 100">透明度: {{opacity}}</span>
-        <span class="rate" v-show="rate !== 1">播放速率: {{rate}}</span>
-        <span class="progress" v-show="progress > 0">播放进度: {{progress}}%</span>
-      </div>
-      <div class="right">
-        <span class="top" @click="frameClickEvent('top')" title="置顶">
-          <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:10px;height:14px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"></path></svg>
-        </span>
-        <span class="min" @click="frameClickEvent('min')" title="最小化">
-          <svg t="1595917239849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1155" style="width:8px;height:14px"><path d="M0 479.936C0 444.64 28.448 416 64.064 416L959.936 416C995.328 416 1024 444.736 1024 479.936L1024 544.064C1024 579.392 995.552 608 959.936 608L64.064 608C28.672 608 0 579.264 0 544.064L0 479.936Z" p-id="1156" fill="#ffffff"></path></svg>
-        </span>
-        <span class="max" @click="frameClickEvent('max')" title="最大化">
-          <svg t="1595917343956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1540" style="width:8px;height:14px"><path d="M416 416 64.064 416C28.448 416 0 444.64 0 479.936L0 544.064C0 579.264 28.672 608 64.064 608L416 608 416 959.936C416 995.552 444.64 1024 479.936 1024L544.064 1024C579.264 1024 608 995.328 608 959.936L608 608 959.936 608C995.552 608 1024 579.36 1024 544.064L1024 479.936C1024 444.736 995.328 416 959.936 416L608 416 608 64.064C608 28.448 579.36 0 544.064 0L479.936 0C444.736 0 416 28.672 416 64.064L416 416Z" p-id="1541" fill="#ffffff"></path></svg>
-        </span>
-        <span class="close" @click="frameClickEvent('close')" title="关闭">
-          <svg t="1595917372551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" style="width:8px;height:14px"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="1686" fill="#ffffff"></path></svg>
-        </span>
-      </div>
-    </div>
-    <div class="bottom">
-      <div id="xg"></div>
-    </div>
-  </div>
-</template>
-<script>
-import zy from '../lib/site/tools'
-import { history, setting, shortcut, mini } from '../lib/dexie'
-import mt from 'mousetrap'
-import 'xgplayer'
-import Hls from 'xgplayer-hls.js'
-const { remote, ipcRenderer } = require('electron')
-const VIDEO_DETAIL_CACHE = {}
-export default {
-  name: 'mini',
-  data () {
-    const win = remote.getCurrentWindow()
-    return {
-      xg: null,
-      config: {
-        id: 'xg',
-        url: '',
-        lang: 'zh-cn',
-        width: '100%',
-        height: '100%',
-        autoplay: false,
-        videoInit: true,
-        screenShot: true,
-        keyShortcut: 'off',
-        crossOrigin: true,
-        cssFullscreen: true,
-        defaultPlaybackRate: 1,
-        playbackRate: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5],
-        controls: false
-      },
-      opacity: 100,
-      name: '',
-      video: {},
-      detail: {},
-      m3u8Arr: [],
-      rate: 1,
-      progress: 0,
-      isAlwaysOnTop: win.isAlwaysOnTop()
-    }
-  },
-  methods: {
-    frameClickEvent (e) {
-      const win = remote.getCurrentWindow()
-      if (e === 'min') {
-        win.minimize()
-      }
-      if (e === 'max') {
-        win.isMaximized() ? win.unmaximize() : win.maximize()
-      }
-      if (e === 'close') {
-        ipcRenderer.send('win')
-        return false
-      }
-      if (e === 'top') {
-        this.isAlwaysOnTop = !this.isAlwaysOnTop
-        win.setAlwaysOnTop(this.isAlwaysOnTop)
-      }
-    },
-    opacityChange (val) {
-      const win = remote.getCurrentWindow()
-      const num = val / 100
-      win.setOpacity(num)
-      return false
-    },
-    getUrls () {
-      mini.find().then(res => {
-        this.video = res
-        this.fetchM3u8List(res).then(m3u8Arr => {
-          this.m3u8Arr = m3u8Arr
-          this.xg.src = m3u8Arr[res.index]
-          if (res.time !== 0 || res.time !== '') {
-            this.xg.play()
-            this.xg.once('playing', () => {
-              this.xg.currentTime = res.time
-            })
-          } else {
-            this.xg.play()
-          }
-          this.videoPlaying()
-          this.xg.once('ended', () => {
-            if (m3u8Arr.length > 1 && (m3u8Arr.length - 1 > res.index)) {
-              this.video.time = 0
-              this.video.index++
-              this.xg.src = m3u8Arr[this.video.index]
-              this.xg.play()
-            }
-          })
-        })
-      })
-    },
-    fetchM3u8List (info) {
-      return new Promise((resolve) => {
-        const cacheKey = info.site + '@' + info.ids
-        if (VIDEO_DETAIL_CACHE[cacheKey]) {
-          this.name = VIDEO_DETAIL_CACHE[cacheKey].name
-          resolve(VIDEO_DETAIL_CACHE[cacheKey].list)
-          return
-        }
-        zy.detail(info.site, info.ids).then(res => {
-          this.name = res.name
-          const dd = res.dl.dd
-          const type = Object.prototype.toString.call(dd)
-          let m3u8Txt = []
-          if (type === '[object Array]') {
-            for (const i of dd) {
-              if (i._t.indexOf('m3u8') >= 0) {
-                m3u8Txt = i._t.split('#')
-              }
-            }
-          } else {
-            m3u8Txt = dd._t.split('#')
-          }
-          const m3u8Arr = []
-          for (const i of m3u8Txt) {
-            const j = i.split('$')
-            if (j.length > 1) {
-              for (let m = 0; m < j.length; m++) {
-                if (j[m].indexOf('m3u8') >= 0) {
-                  m3u8Arr.push(j[m])
-                }
-              }
-            } else {
-              m3u8Arr.push(j[0])
-            }
-          }
-
-          VIDEO_DETAIL_CACHE[cacheKey] = {
-            list: m3u8Arr,
-            name: res.name
-          }
-          resolve(m3u8Arr)
-        })
-      })
-    },
-    videoPlaying () {
-      history.find({ site: this.video.site, ids: this.video.ids }).then(res => {
-        if (res) {
-          res.index = this.video.index
-          history.update(res.id, res)
-        } else {
-          const doc = {
-            site: this.video.site,
-            ids: this.video.ids,
-            name: this.video.name,
-            index: this.video.index,
-            time: 0
-          }
-          history.add(doc)
-        }
-      })
-      this.timerEvent()
-    },
-    timerEvent () {
-      this.timer = setInterval(() => {
-        const endTime = this.xg.duration
-        const currentTime = this.xg.currentTime
-        const progress = (currentTime / endTime) * 100
-        this.progress = progress.toFixed(2)
-        history.find({ site: this.video.site, ids: this.video.ids }).then(res => {
-          if (res) {
-            const v = res
-            v.time = this.xg.currentTime
-            v.index = this.video.index
-            const id = v.id
-            delete v.id
-            history.update(id, v)
-          }
-        })
-      }, 10000)
-    },
-    prevEvent () {
-      if (this.video.index === 0) {
-        this.$message.info('已是第一集.')
-        return false
-      }
-      history.find({ site: this.video.site, ids: this.video.ids }).then(res => {
-        const v = res
-        const id = v.id
-        v.index--
-        delete v.id
-        history.update(id, v).then(e => {
-          this.xg.src = this.m3u8Arr[v.index]
-          this.video.index--
-        })
-      })
-    },
-    nextEvent () {
-      if (this.video.index >= this.m3u8Arr.length - 1) {
-        this.$message.info('已是最后一集.')
-        return false
-      }
-      history.find({ site: this.video.site, ids: this.video.ids }).then(res => {
-        const v = res
-        v.index++
-        const id = v.id
-        delete v.id
-        history.update(id, v).then(e => {
-          this.xg.src = this.m3u8Arr[v.index]
-          this.video.index++
-        })
-      })
-    },
-    playbackRateEvent (e) {
-      let rate = this.xg.playbackRate
-      if (rate > 0.25) {
-        rate = rate + e
-        this.xg.playbackRate = rate
-      }
-    },
-    mtEvent () {
-      setting.find().then(res => {
-        if (res.shortcut) {
-          shortcut.all().then(res => {
-            for (const i of res) {
-              mt.bind(i.key, () => {
-                this.shortcutEvent(i.name)
-              })
-            }
-          })
-        }
-      })
-    },
-    shortcutEvent (e) {
-      if (e === 'playAndPause') {
-        if (this.xg) {
-          if (this.xg.paused) {
-            this.xg.play()
-          } else {
-            this.xg.pause()
-          }
-        }
-        return false
-      }
-      if (e === 'forward') {
-        if (this.xg && !this.xg.paused) {
-          this.xg.currentTime += 5
-        }
-        return false
-      }
-      if (e === 'back') {
-        if (this.xg && !this.xg.paused) {
-          this.xg.currentTime -= 5
-        }
-        return false
-      }
-      if (e === 'volumeUp') {
-        if (this.xg && this.xg.volume < 0.9) {
-          this.xg.volume += 0.1
-        }
-        return false
-      }
-      if (e === 'volumeDown') {
-        if (this.xg && this.xg.volume > 0.2) {
-          this.xg.volume -= 0.1
-        }
-        return false
-      }
-      if (e === 'mute') {
-        if (this.xg) {
-          this.xg.volume = 0
-        }
-        return false
-      }
-      if (e === 'top') {
-        const win = remote.getCurrentWindow()
-        if (win.isAlwaysOnTop()) {
-          win.setAlwaysOnTop(false)
-        } else {
-          win.setAlwaysOnTop(true)
-        }
-        return false
-      }
-      if (e === 'fullscreen') {
-        if (this.xg.fullscreen) {
-          this.xg.exitFullscreen()
-        } else {
-          this.xg.getFullscreen(this.xg.root)
-        }
-        return false
-      }
-      if (e === 'escape') {
-        if (this.xg.fullscreen) {
-          this.xg.exitFullscreen()
-          this.xg.exitCssFullscreen()
-        }
-        return false
-      }
-      if (e === 'next') {
-        this.nextEvent()
-        return false
-      }
-      if (e === 'prev') {
-        this.prevEvent()
-        return false
-      }
-      if (e === 'home') {
-        if (this.xg && !this.xg.paused) {
-          this.xg.currentTime = 0
-        }
-        return false
-      }
-      if (e === 'end') {
-        if (this.xg && !this.xg.paused) {
-          const endTime = this.xg.duration
-          this.xg.currentTime = endTime
-        }
-        return false
-      }
-      if (e === 'opacityUp') {
-        const win = remote.getCurrentWindow()
-        if (this.opacity >= 10) {
-          this.opacity -= 5
-          const num = this.opacity / 100
-          win.setOpacity(num)
-        }
-        return false
-      }
-      if (e === 'opacityDown') {
-        const win = remote.getCurrentWindow()
-        if (this.opacity <= 95) {
-          this.opacity += 5
-          const num = this.opacity / 100
-          win.setOpacity(num)
-        }
-        return false
-      }
-      if (e === 'playbackRateUp') {
-        if (this.xg && !this.xg.paused) {
-          const rate = this.xg.playbackRate
-          this.xg.playbackRate = rate + 0.25
-          this.rate = this.xg.playbackRate
-        }
-        return false
-      }
-      if (e === 'playbackRateDown') {
-        if (this.xg && !this.xg.paused) {
-          const rate = this.xg.playbackRate
-          if (rate > 0.25) {
-            this.xg.playbackRate = rate - 0.25
-            this.rate = this.xg.playbackRate
-          }
-        }
-        return false
-      }
-      if (e === 'mini') {
-        ipcRenderer.send('win')
-        return false
-      }
-    }
-  },
-  mounted () {
-    this.xg = new Hls(this.config)
-    this.mtEvent()
-    this.getUrls()
-  },
-  beforeDestroy () {
-    clearInterval(this.timer)
-  }
-}
-</script>
-<style lang="scss">
-html,body{
-  padding: 1px;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background-color: #000;
-}
-.mini{
-  -webkit-app-region: drag;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  .top{
-    width: 100%;
-    height: 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    user-select: none;
-    .zy-svg{
-      -webkit-app-region: no-drag;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      svg{
-        width: 24px;
-        height: 24px;
-        stroke: #888;
-        stroke-width: 1;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        fill: none;
-      }
-    }
-    .left{
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      height: 100%;
-      flex: 1;
-      .title, .opacity, .rate, .progress{
-        color: #888;
-        font-size: 12px;
-        margin: 0 10px;
-      }
-    }
-    .right{
-      width: 80px;
-      height: 100%;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      span{
-        -webkit-app-region: no-drag;
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        text-align: center;
-        line-height: 14px;
-        border-radius: 50%;
-        margin-right: 10px;
-        cursor: pointer;
-        opacity: 0.4;
-        &.min{
-          background-color: #32dc36;
-        }
-        &.max{
-          background-color: #ffbe2a;
-        }
-        &.close{
-          background-color: #ff5f56;
-        }
-        &.top{
-          background-color: #f3bab7;
-        }
-        &:hover{
-          animation: heartbeat 3s ease-in-out infinite both;
-        }
-        @keyframes heartbeat {
-          from {
-            transform: scale(1);
-            transform-origin: center center;
-            animation-timing-function: ease-out;
-          }
-          10% {
-            opacity: 1;
-            transform: scale(0.91);
-            animation-timing-function: ease-in;
-          }
-          17% {
-            transform: scale(0.98);
-            animation-timing-function: ease-out;
-          }
-          33% {
-            transform: scale(0.87);
-            animation-timing-function: ease-in;
-          }
-          45% {
-            transform: scale(1);
-            animation-timing-function: ease-out;
-          }
-        }
-      }
-    }
-  }
-  .bottom{
-    width: 100%;
-    flex: 1;
-    .xgplayer-start{
-      -webkit-app-region: no-drag;
-    }
-  }
-}
-</style>

src/mini/main.js

@@ -1,10 +0,0 @@
-import Vue from 'vue'
-import Mini from './Mini'
-import 'modern-normalize'
-import '../lib/element/index'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(Mini)
-}).$mount('#app')

src/store/index.js

@@ -26,10 +26,10 @@ export default new Vuex.Store({
       key: '',
       info: {}
     },
-    editSites: {
-      show: false,
-      sites: []
-    }
+    appState: {
+      windowIsOnTop: false
+    },
+    DetailCache: {}
   },
   getters: {
     getView: state => {
@@ -47,8 +47,11 @@ export default new Vuex.Store({
     getVideo: state => {
       return state.video
     },
-    getEditSites: state => {
-      return state.editSites
+    getAppState: state => {
+      return state.appState
+    },
+    getDetailCache: state => {
+      return state.DetailCache
     }
   },
   mutations: {
@@ -67,8 +70,11 @@ export default new Vuex.Store({
     SET_VIDEO: (state, payload) => {
       state.video = payload
     },
-    SET_EDITSITES: (state, payload) => {
-      state.editSites = payload
+    SET_APPSTATE: (state, payload) => {
+      state.appState = payload
+    },
+    set_DetailCache: (state, payload) => {
+      state.DetailCache = payload
     }
   }
 })

vue.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   pages: {
-    index: 'src/main.js',
-    mini: 'src/mini/main.js'
+    index: 'src/main.js'
   },
   pluginOptions: {
     electronBuilder: {