🥚 版本号

全新版本，更多功能。

.browserslistrc

@@ -1,2 +1,3 @@
 > 1%
 last 2 versions
+not dead

.eslintrc.js

@@ -3,15 +3,15 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
     '@vue/standard'
   ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
   parserOptions: {
     parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   }
 }

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: release-build
+
+on:
+  push:
+    tags:
+      - v*.*.*
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [windows-latest, macos-latest, ubuntu-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - run: |
+          yarn
+          yarn electron:build
+        shell: pwsh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            dist_electron/*.exe
+            dist_electron/*.dmg
+            dist_electron/*.snap
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Hunlongyu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,24 +1,48 @@
-# evt
+<p align="center">
+<img src="https://i.loli.net/2020/02/22/jvfBbnEuOq5RS9J.png" >
+</p>
+<p align="center">
+<img src="https://forthebadge.com/images/badges/built-with-love.svg">
+<img src="https://forthebadge.com/images/badges/made-with-vue.svg">
+<p>
+<p align="center">
+<img alt="GitHub" src="https://img.shields.io/github/license/Hunlongyu/ZY-Player?style=for-the-badge">
+<img alt="GitHub All Releases" src="https://img.shields.io/github/downloads/Hunlongyu/ZY-Player/total?style=for-the-badge">
+<img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/Hunlongyu/ZY-Player?include_prereleases&style=for-the-badge">
+<p>
 
-## Project setup
-```
-yarn install
-```
+## ZY Player
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
 
-### Compiles and minifies for production
-```
-yarn build
-```
+### 新版
 
-### Lints and fixes files
-```
-yarn lint
-```
+新版本: v0.9.9 已开发完, 现进行内测. [内侧公告](https://github.com/Hunlongyu/ZY-Player/issues/24)
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+[点击这里可以查看开发计划](https://github.com/Hunlongyu/ZY-Player/projects/3). 
+
+大家有什么新的需求建议欢迎踊跃提出[点击这里提意见](https://github.com/Hunlongyu/ZY-Player/issues/14).
+## v0.9.1 版本：
+
+#### 下载 (目前最新版: v0.9.1):
+1. [Github -- 官方下载](https://github.com/Hunlongyu/ZY-Player/releases)
+
+2. [蓝奏云 -- 快速下载](https://www.lanzous.com/b04s6a3re) 密码:95px
+
+#### 截图: 
+主界面 ⬇
+![film.png](https://i.loli.net/2020/01/19/U1EPzoJHhTDnuxA.png)
+暗黑主题 ⬇
+![dark.png](https://i.loli.net/2020/01/20/eU6J3EFcPTXnjlK.png)
+搜索 ⬇
+![search.png](https://i.loli.net/2020/01/19/BPvJKxlnNfquRI4.png)
+搜索结果 ⬇
+![search-keyword.png](https://i.loli.net/2020/01/19/6wfY3rPBokM15hl.png)
+详情 ⬇
+![detail.png](https://i.loli.net/2020/01/19/CN8E1ikyMbhzo9t.png)
+播放 ⬇
+![play.png](https://i.loli.net/2020/01/19/4XlJRqmx2y8zAec.png)
+收藏 ⬇
+![star.png](https://i.loli.net/2020/01/19/Q2fkWUvaXKZJcS4.png)
+
+### 重要: 
+所有资源来自网上, 该软件不参与任何制作, 上传, 储存, 下载等内容. 该软件仅供学习参考, 请于安装后24小时内删除.

babel.config.js

@@ -1,5 +1,14 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
   ]
 }

docs/CNAME

@@ -0,0 +1 @@
+zyplayer.fun

docs/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>官网</title>
+</head>
+<body>
+  待重建
+</body>
+</html>

docs/player/player.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
+    <meta name="referrer" content="no-referrer">
+    <title>xgplayer</title>
+    <style type="text/css">
+      html, body {width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
+    </style>
+  </head>
+  <body>
+    <div id="mse"></div>
+    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
+    <script src="//cdn.jsdelivr.net/npm/xgplayer-hls.js/browser/index.js" charset="utf-8"></script><script>
+      function get (name) {
+        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
+        if (r!=null)return unescape(r[2]); return null;
+      }
+      let link = window.location.href
+      let title = get('title')
+      let url = get('url')
+      document.title = title
+      let player = new HlsJsPlayer({
+        "id": "mse",
+        "url": url,
+        "playsinline": true,
+        "autoplay": true,
+        "fluid": true,
+        "height": window.innerHeight,
+        "width": window.innerWidth,
+        "playbackRate": [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3 ],
+        "x5-video-player-type": "h5",
+        "x5-video-player-fullscreen": "true",
+        "x5-video-orientation": "landscape"
+      })
+    </script>
+  </body>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "evt",
-  "version": "0.1.0",
+  "name": "zyplayer",
+  "version": "0.9.11",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -13,25 +13,40 @@
   },
   "main": "background.js",
   "dependencies": {
-    "axios": "^0.19.0",
-    "core-js": "^2.6.5",
-    "modern-normalize": "^0.5.0",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "axios": "^0.19.2",
+    "core-js": "^3.6.4",
+    "dexie": "^2.0.4",
+    "electron-updater": "^4.2.5",
+    "element-ui": "^2.13.1",
+    "html2canvas": "^1.0.0-rc.5",
+    "leancloud-storage": "^4.5.3",
+    "macaddress": "^0.2.9",
+    "modern-normalize": "^0.6.0",
+    "qrcode.vue": "^1.7.0",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.17.0",
+    "vuex": "^3.1.3",
+    "xgplayer": "^2.6.14",
+    "xgplayer-hls.js": "^2.1.6"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.0",
-    "@vue/cli-plugin-eslint": "^3.12.0",
-    "@vue/cli-service": "^3.12.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.1",
-    "electron": "7.1.2",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
-    "vue-cli-plugin-electron-builder": "^1.4.2",
-    "vue-template-compiler": "^2.6.10"
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-plugin-vuex": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "electron": "^8.2.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "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.3",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-electron-builder": "2.0.0-beta.6",
+    "vue-template-compiler": "^2.6.11"
   }
 }

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}

public/index.html

@@ -4,12 +4,21 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>evt</title>
+    <link rel="icon" href="<%= BASE_URL %>icon.png">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?62aeb2505bfa26a2461d2a7a3b485096";
+        var s = document.getElementsByTagName("script")[0]; 
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but evt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

@@ -1,29 +1,80 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/search">search</router-link>
+  <div id="app" :class="appTheme">
+    <Aside />
+    <div class="zy-body">
+      <Frame />
+      <Film v-show="view === 'Film'" />
+      <Play v-show="view === 'Play'" />
+      <Star v-show="view === 'Star'" />
+      <Setting v-show="view === 'Setting'" />
     </div>
-    <router-view/>
+    <transition name="slide">
+      <Detail v-if="detail.show"/>
+    </transition>
+    <transition name="slide">
+      <Share v-if="share.show"/>
+    </transition>
   </div>
 </template>
-
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
+<script>
+export default {
+  name: 'App',
+  data () {
+    return {
+      appTheme: 'theme-light'
+    }
+  },
+  computed: {
+    view () {
+      return this.$store.getters.getView
+    },
+    detail () {
+      return this.$store.getters.getDetail
+    },
+    share () {
+      return this.$store.getters.getShare
+    },
+    theme () {
+      return this.$store.getters.getTheme
+    }
+  },
+  watch: {
+    theme () {
+      this.changeTheme()
+    }
+  },
+  methods: {
+    changeTheme () {
+      this.appTheme = `theme-${this.theme}`
     }
   }
 }
+</script>
+
+<style lang="scss">
+@import './assets/scss/theme.scss';
+html, body, #app{
+  height: 100%;
+  border-radius: 6px;
+}
+#app {
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  .zy-body{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 0 20px 20px;
+  }
+}
 </style>

src/assets/scss/style.scss

@@ -0,0 +1,217 @@
+// svg
+.zy-svg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg{
+    width: 24px;
+    height: 24px;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+  }
+}
+
+// select
+.zy-select{
+  position: relative;
+  display: inline-block;
+  width: 200px;
+  height: 30px;
+  cursor: pointer;
+  border-radius: 3px;
+  user-select: none;
+  vertical-align: middle;
+  .vs-placeholder{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 25px;
+    padding-right: 25px;
+    &::after{
+      display: inline-block;
+      margin-left: .255em;
+      vertical-align: .255em;
+      content: "";
+      border-top: .3em solid;
+      border-right: .3em solid transparent;
+      border-bottom: 0;
+      border-left: .3em solid transparent;
+    }
+  }
+  .vs-options{
+    z-index: 2;
+    width: 100%;
+    overflow-y: auto;
+    min-height: 0;
+    ul{
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      li{
+        width: 100%;
+        height: 30px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding-left: 25px;
+      }
+    }
+  }
+}
+
+// table
+.zy-table{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-size: 15px;
+  .tHead{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px solid;
+    padding: 0 5px 0 0;
+    font-weight: 600;
+    span{
+      display: flex;
+      width: 180px;
+      font-size: 16px;
+      &.name{
+        flex: 1;
+        padding-left: 15px;
+      }
+      &.type{
+        width: 120px;
+      }
+      &.from{
+        width: 120px;
+      }
+      &.operate{
+        width: 120px;
+      }
+    }
+  }
+  .tBody{
+    flex: 1;
+    overflow-y: scroll;
+    border-bottom: 1px solid;
+    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;
+          width: 180px;
+          font-size: 13px;
+          height: 50px;
+          line-height: 50px;
+          &.name{
+            flex: 1;
+            padding-left: 15px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          &.type{
+            width: 120px;
+          }
+          &.from{
+            width: 120px;
+          }
+          &.operate{
+            width: 120px;
+          }
+        }
+      }
+    }
+  }
+  .tFooter{
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding-right: 10px;
+    .tFooter-span{
+      padding-left: 10px;
+      font-size: 12px;
+    }
+  }
+}
+
+// scroll
+.zy-scroll{
+  &::-webkit-scrollbar{
+    width: 5px;
+    height: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    position: absolute;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    position: absolute;
+  }
+}
+
+// loading
+.zy-loading{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .loader {
+    font-size: 8px;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: load4 1.3s infinite linear;
+    transform: translateZ(0);
+  }
+  @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;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+    }
+  }
+}

src/assets/scss/theme.scss

@@ -0,0 +1,42 @@
+:root{
+  // light
+  --l-c-0: #823aa0;
+  --l-c-1: #823aa011;
+  --l-c-2: #823aa022;
+  --l-c-3: #823aa033;
+  --l-c-5: #823aa055;
+  --l-c-8: #823aa088;
+  --l-c-9: #823aa099;
+  --l-fc-1: #808695;
+  --l-fc-2: #332f5c;
+  --l-fc-3: #823aa0;
+  --l-bgc-1: #ffffff;
+  --l-bgc-2: #f2f6f9;
+  --l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
+  --l-bsc-2: 0 -4px 23px 0 #8e8da233;
+  --l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
+  --l-bsc-scroll: inset 0 0 5px #823aa005;
+
+  // dark
+  --d-c-0: #38dd77;
+  --d-c-1: #38dd7711;
+  --d-c-2: #38dd7722;
+  --d-c-3: #38dd7733;
+  --d-c-5: #38dd7755;
+  --d-c-8: #38dd7788;
+  --d-c-9: #38dd7799;
+  --d-fc-1: #808695;
+  --d-fc-2: #acacac;
+  --d-fc-3: #38dd77;
+  --d-bgc-1: #222222;
+  --d-bgc-2: #2f2f2f;
+  --d-bsc: 0 3px 1px -2px #38dd7733, 0 2px 2px 0 #38dd7722, 0 1px 5px 0 #38dd7711;
+  --d-bsc-2: 0 -4px 23px 0 #38dd7733;
+  --d-bsc-hover: 0 14px 26px -12px #38dd7733, 0 4px 23px 0 #38dd7722, 0 8px 10px -5px #38dd7711;
+  --d-bsc-scroll: inset 0 0 5px #38dd7705;
+}
+
+@import './theme/light.scss';
+@import './theme/dark.scss';
+
+@import './style.scss';

src/assets/scss/theme/dark.scss

@@ -0,0 +1,349 @@
+.theme-dark{
+  background-color: var(--d-bgc-1);
+  .xgplayer-skin-default video{
+    background-color: var(--d-bgc-2);
+  }
+  .el-pagination{
+    background-color: var(--d-bgc-1);
+    color: var(--d-fc-1);
+    .el-pagination__total, .el-pagination__jump, .el-input__inner{
+      color: var(--d-fc-1);
+      background-color: var(--d-bgc-1);
+    }
+    .el-input__inner{
+      border-color: var(--d-c-3);
+    }
+    .el-pager{
+      .number{
+        background-color: var(--d-bgc-1);
+      }
+      .number:hover{
+        color: var(--d-c-8);
+      }
+      .active{
+        color: var(--d-c-9);
+      }
+    }
+    .more, .btn-next, .btn-prev{
+      background-color: var(--d-bgc-1);
+      &:hover{
+        color: var(--d-c-8);
+      }
+    }
+  }
+  .zy-select{
+    color: var(--d-fc-1);
+    background-color: var(--d-bgc-1);
+    box-shadow: var(--d-bsc);
+    &:hover{
+      box-shadow: var(--d-bsc-hover);
+    }
+    .vs-options{
+      background-color: var(--d-bgc-1);
+      box-shadow: var(--d-bsc);
+      ul{
+        li{
+          &:hover{
+            background-color: var(--d-c-1);
+          }
+          &.active{
+            background-color: var(--d-c-3);
+          }
+        }
+      }
+    }
+  }
+  .zy-table{
+    color: var(--d-fc-2);
+    .tHead{
+      background-color: var(--d-bgc-1);
+      border-bottom-color: var(--d-c-3);
+    }
+    .tBody{
+      border-bottom-color: var(--d-c-3);
+      ul{
+        li{
+          border-bottom-color: var(--d-c-2);
+          &:hover{
+            animation: d-tableHoverAni 0.2s ease both;
+            @keyframes d-tableHoverAni {
+              to{
+                box-shadow: var(--d-bsc-hover);
+              }
+            }
+          }
+          span{
+            &.btn:hover{
+              color: var(--d-fc-3)
+            }
+          }
+        }
+      }
+    }
+    .tFooter{
+      .tFooter-span{
+        color: var(--d-fc-1);
+      }
+    }
+  }
+  .zy-scroll{
+    &:hover{
+      &::-webkit-scrollbar-thumb {
+        box-shadow: var(--d-bsc-scroll);
+        background: var(--d-c-3);
+      }
+      &::-webkit-scrollbar-track {
+        box-shadow: var(--d-bsc-scroll);
+        background: var(--bgc);
+      }
+    }
+  }
+  .zy-loading{
+    .loader{
+      color: var(--d-c-3);
+    }
+  }
+  .zy-body{
+    background-color: var(--d-bgc-2);
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--d-c-0);
+      }
+      &:hover{
+        background-color: var(--d-c-2);
+      }
+      &.active{
+        svg{
+          stroke: var(--d-c-0);
+          stroke-width: 2;
+          fill: var(--d-c-2);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+  .detail{
+    color: var(--d-fc-1);
+    background-color:var(--d-bgc-1);
+    box-shadow: var(--d-bsc-2);
+    .detail-content{
+      .detail-close{
+        svg{
+          stroke-width: 1;
+          stroke: var(--d-c-8);
+          &:hover{
+            stroke-width: 2px;
+            stroke: var(--d-c-9);
+          }
+        }
+      }
+      .detail-body{
+        .info, .desc, .m3u8_urls, .mp4_urls{
+          border-color: var(--d-c-2);
+        }
+        .m3u8_urls, .mp4_urls{
+          .box{
+            span{
+              border-color: var(--d-c-5);
+              &:hover{
+                color: var(--d-fc-2);
+                background-color: var(--d-c-1);
+                border-color: var(--d-c-8);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .film{
+    .top{
+      .search{
+        background-color: var(--d-bgc-1);
+        box-shadow: var(--d-bsc);
+        &:hover{
+          box-shadow: var(--d-bsc-hover);
+        }
+        svg{
+          stroke: var(--d-c-0);
+          stroke-width: 1;
+          fill: none;
+        }
+        .search-box{
+          background-color: var(--d-bgc-1);
+        }
+        &.active{
+          box-shadow: var(--d-bsc-hover);
+          svg{
+            stroke-width: 1.5;
+            fill: var(--d-c-2);
+          }
+        }
+        input{
+          color: var(--d-fc-1);
+        }
+      }
+    }
+    .middle{
+      background-color: var(--d-bgc-1);
+      box-shadow: var(--d-bsc);
+    }
+  }
+  .play{
+    background-color: var(--d-bgc-1);
+    box-shadow: var(--d-bsc);
+    .title{
+      color: var(--d-fc-1);
+    }
+    .box{
+      .more{
+        span{
+          svg{
+            stroke: var(--d-c-5);
+            stroke-width: 1;
+            fill: none;
+          }
+          &:hover{
+            svg{
+              stroke: var(--d-c-8);
+              stroke-width: 1.5;
+              fill: var(--d-c-2);
+            }
+          }
+          &.active{
+            svg{
+              stroke: var(--d-c-9);
+              stroke-width: 2;
+              fill: var(--d-c-3);
+            }
+          }
+        }
+      }
+    }
+    .list{
+      border: 1px solid var(--d-c-3);
+      background-color: var(--d-bgc-2);
+      .list-top{
+        color: var(--d-fc-2);
+        .list-top-close{
+          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);
+            }
+          }
+        }
+      }
+      .list-body{
+        .list-item{
+          li{
+            color: var(--d-fc-1);
+            &.active{
+              background-color: var(--d-c-2);
+              color: var(--d-fc-3);
+            }
+          }
+        }
+        .list-history{
+          li{
+            .title{
+              color: var(--d-fc-1);
+            }
+            &.active{
+              background-color: var(--d-c-2);
+              .title{
+                color: var(--d-fc-3);
+              }
+            }
+            &:hover{
+              background-color: var(--d-c-3);
+              .detail-delete{
+                display: inline-block;
+                color: var(--d-fc-2);
+              }
+            }
+            .detail-delete{
+              &:hover{
+                background-color: var(--d-c-2);
+              }
+            }
+          }
+        }
+      }
+    }
+    .play-mask{
+      background-color: var(--d-bgc-1);
+      color: var(--d-fc-1);
+    }
+  }
+  .star{
+    background-color: var(--d-bgc-1);
+    box-shadow: var(--d-bsc);
+  }
+  .setting{
+    background-color: var(--d-bgc-1);
+    box-shadow: var(--d-bsc);
+    .info{
+      a{
+        color: var(--d-fc-1);
+        &:hover{
+          color: var(--d-fc-2);
+        }
+      }
+    }
+    .theme{
+      .title{
+        color: var(--d-fc-1);
+      }
+      .theme-item{
+        box-shadow: var(--d-bsc);
+        &:hover{
+          box-shadow: var(--d-bsc-hover);
+          .theme-name{
+            color: var(--d-fc-2)
+          }
+        }
+        .theme-name{
+          color: var(--d-fc-1);
+        }
+      }
+    }
+    .qrcode{
+      .title{
+        color: var(--d-fc-1);
+      }
+      .qrcode-item{
+        box-shadow: var(--d-bsc);
+      }
+    }
+  }
+  .share{
+    background-color: var(--d-bgc-1);
+    color: var(--d-fc-1);
+    border: 1px solid var(--d-c-8);
+    .right{
+      color: var(--d-fc-1);
+      .tops{
+        color: var(--d-fc-2);
+      }
+    }
+    .share-mask{
+      background-color: var(--d-bgc-1);
+    }
+  }
+}

src/assets/scss/theme/light.scss

@@ -0,0 +1,340 @@
+.theme-light{
+  background-color: var(--l-bgc-1);
+  .xgplayer-skin-default video{
+    background-color: var(--l-bgc-2);
+  }
+  .el-pagination{
+    color: var(--l-fc-1);
+    .el-pagination__total, .el-pagination__jump, .el-input__inner{
+      color: var(--l-fc-1);
+    }
+    .el-pager{
+      .number:hover{
+        color: var(--l-c-8);
+      }
+      .active{
+        color: var(--l-c-9);
+      }
+    }
+    .more, .btn-next, .btn-prev{
+      &:hover{
+        color: var(--l-c-8);
+      }
+    }
+  }
+  .zy-select{
+    color: var(--l-fc-1);
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+    &:hover{
+      box-shadow: var(--l-bsc-hover);
+    }
+    .vs-options{
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc);
+      ul{
+        li{
+          &:hover{
+            background-color: var(--l-c-1);
+          }
+          &.active{
+            background-color: var(--l-c-3);
+          }
+        }
+      }
+    }
+  }
+  .zy-table{
+    color: var(--l-fc-2);
+    .tHead{
+      background-color: var(--l-bgc-1);
+      border-bottom-color: var(--l-c-3);
+    }
+    .tBody{
+      border-bottom-color: var(--l-c-3);
+      ul{
+        li{
+          border-bottom-color: var(--l-c-2);
+          &:hover{
+            animation: l-tableHoverAni 0.2s ease both;
+            @keyframes l-tableHoverAni {
+              to{
+                box-shadow: var(--l-bsc-hover);
+              }
+            }
+          }
+          span{
+            &.btn:hover{
+              color: var(--l-fc-3)
+            }
+          }
+        }
+      }
+    }
+    .tFooter{
+      .tFooter-span{
+        color: var(--l-fc-1);
+      }
+    }
+  }
+  .zy-scroll{
+    &:hover{
+      &::-webkit-scrollbar-thumb {
+        box-shadow: var(--l-bsc-scroll);
+        background: var(--l-c-3);
+      }
+      &::-webkit-scrollbar-track {
+        box-shadow: var(--l-bsc-scroll);
+        background: var(--bgc);
+      }
+    }
+  }
+  .zy-loading{
+    .loader{
+      color: var(--l-c-3);
+    }
+  }
+  .zy-body{
+    background-color: var(--l-bgc-2);
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--l-c-0);
+      }
+      &:hover{
+        background-color: var(--l-c-2);
+      }
+      &.active{
+        svg{
+          stroke: var(--l-c-0);
+          stroke-width: 2;
+          fill: var(--l-c-2);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+  .detail{
+    color: var(--l-fc-1);
+    background-color:var(--l-bgc-1);
+    box-shadow: var(--l-bsc-2);
+    .detail-content{
+      .detail-close{
+        svg{
+          stroke-width: 1;
+          stroke: var(--l-c-8);
+          &:hover{
+            stroke-width: 2px;
+            stroke: var(--l-c-9);
+          }
+        }
+      }
+      .detail-body{
+        .info, .desc, .m3u8_urls, .mp4_urls{
+          border-color: var(--l-c-2);
+        }
+        .m3u8_urls, .mp4_urls{
+          .box{
+            span{
+              border-color: var(--l-c-5);
+              &:hover{
+                color: var(--l-fc-2);
+                background-color: var(--l-c-1);
+                border-color: var(--l-c-8);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .film{
+    .top{
+      .search{
+        background-color: var(--l-bgc-1);
+        box-shadow: var(--l-bsc);
+        &:hover{
+          box-shadow: var(--l-bsc-hover);
+        }
+        svg{
+          stroke: #823aa099;
+          stroke-width: 1;
+          fill: none;
+        }
+        .search-box{
+          background-color: none;
+        }
+        &.active{
+          box-shadow: var(--l-bsc-hover);
+          svg{
+            stroke-width: 1.5;
+            fill: var(--l-c-2);
+          }
+        }
+        input{
+          color: var(--l-fc-1);
+        }
+      }
+    }
+    .middle{
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc);
+    }
+  }
+  .play{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+    .title{
+      color: var(--d-fc-1);
+    }
+    .box{
+      .more{
+        span{
+          svg{
+            stroke: var(--l-c-5);
+            stroke-width: 1;
+            fill: none;
+          }
+          &:hover{
+            svg{
+              stroke: var(--l-c-8);
+              stroke-width: 1.5;
+              fill: var(--l-c-2);
+            }
+          }
+          &.active{
+            svg{
+              stroke: var(--l-c-9);
+              stroke-width: 2;
+              fill: var(--l-c-3);
+            }
+          }
+        }
+      }
+    }
+    .list{
+      border: 1px solid var(--l-c-3);
+      background-color: var(--l-bgc-2);
+      .list-top{
+        color: var(--l-fc-2);
+        .list-top-close{
+          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);
+            }
+          }
+        }
+      }
+      .list-body{
+        .list-item{
+          li{
+            color: var(--l-fc-1);
+            &.active{
+              background-color: var(--l-c-2);
+              color: var(--l-fc-3);
+            }
+          }
+        }
+        .list-history{
+          li{
+            .title{
+              color: var(--l-fc-1);
+            }
+            &.active{
+              background-color: var(--l-c-2);
+              .title{
+                color: var(--l-fc-3);
+              }
+            }
+            &:hover{
+              background-color: var(--l-c-3);
+              .detail-delete{
+                display: inline-block;
+                color: var(--l-fc-2);
+              }
+            }
+            .detail-delete{
+              &:hover{
+                background-color: var(--l-c-2);
+              }
+            }
+          }
+        }
+      }
+    }
+    .play-mask{
+      background-color: var(--l-bgc-1);
+      color: var(--l-fc-1);
+    }
+  }
+  .star{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+  }
+  .setting{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+    .info{
+      a{
+        color: var(--l-fc-1);
+        &:hover{
+          color: var(--l-fc-2);
+        }
+      }
+    }
+    .theme{
+      .title{
+        color: var(--l-fc-1);
+      }
+      .theme-item{
+        box-shadow: var(--l-bsc);
+        &:hover{
+          box-shadow: var(--l-bsc-hover);
+          .theme-name{
+            color: var(--l-fc-2)
+          }
+        }
+        .theme-name{
+          color: var(--l-fc-1);
+        }
+      }
+    }
+    .qrcode{
+      .title{
+        color: var(--l-fc-1);
+      }
+      .qrcode-item{
+        box-shadow: var(--l-bsc);
+      }
+    }
+  }
+  .share{
+    background-color: var(--l-bgc-1);
+    color: var(--l-fc-1);
+    border: 1px solid var(--l-c-8);
+    .right{
+      color: var(--l-fc-1);
+      .tops{
+        color: var(--l-fc-2);
+      }
+    }
+    .share-mask{
+      background-color: var(--l-bgc-1);
+    }
+  }
+}

src/background.js

@@ -1,38 +1,43 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, ipcMain, protocol, BrowserWindow } from 'electron'
 import {
   createProtocol
+  // installVueDevtools
 } from 'vue-cli-plugin-electron-builder/lib'
-
+import path from 'path'
+import { autoUpdater } from 'electron-updater'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win
+let mini
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
 function createWindow () {
-  // Create the browser window.
   win = new BrowserWindow({
-    width: 1024,
-    height: 800,
+    width: 1080,
+    height: 720,
+    frame: false,
+    resizable: true,
+    transparent: true,
     webPreferences: {
       webSecurity: false,
-      nodeIntegration: true
-    }
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+    },
+    // eslint-disable-next-line
+    icon: path.join(__static, 'icon.png')
   })
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
     if (!process.env.IS_TEST) win.webContents.openDevTools()
   } else {
-    createProtocol('app')
-    // Load the index.html when not in development
     win.loadURL('app://./index.html')
+    autoUpdater.checkForUpdatesAndNotify()
   }
 
   win.on('closed', () => {
@@ -40,39 +45,78 @@ function createWindow () {
   })
 }
 
-// Quit when all windows are closed.
+function createMini () {
+  mini = new BrowserWindow({
+    width: 550,
+    minWidth: 260,
+    height: 340,
+    minHeight: 180,
+    frame: false,
+    resizable: true,
+    transparent: true,
+    alwaysOnTop: true,
+    webPreferences: {
+      webSecurity: false,
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+    },
+    // eslint-disable-next-line
+    icon: path.join(__static, 'icon.png')
+  })
+
+  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 {
+    mini.loadURL('app://./mini.html')
+  }
+
+  mini.on('closed', () => {
+    mini = null
+  })
+}
+
+app.allowRendererProcessReuse = true
+
 app.on('window-all-closed', () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
   if (process.platform !== 'darwin') {
     app.quit()
   }
 })
 
 app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
   if (win === null) {
     createWindow()
   }
+  if (mini === null) {
+    createMini()
+  }
+})
+
+ipcMain.on('min', () => {
+  win.minimize()
+})
+ipcMain.on('close', () => {
+  win.close()
+})
+
+ipcMain.on('mini', () => {
+  createMini()
+  win.close()
+})
+ipcMain.on('miniMin', () => {
+  mini.minimize()
+})
+ipcMain.on('miniClose', () => {
+  mini.close()
+  createWindow()
+})
+ipcMain.on('miniOpacity', (e, arg) => {
+  mini.setOpacity(arg)
 })
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    // Devtools extensions are broken in Electron 6.0.0 and greater
-    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
-    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
-    // If you are not using Windows 10 dark mode, you may uncomment these lines
-    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
-    // try {
-    //   await installVueDevtools()
-    // } catch (e) {
-    //   console.error('Vue Devtools failed to install:', e.toString())
-    // }
+  if (!process.env.WEBPACK_DEV_SERVER_URL) {
+    createProtocol('app')
   }
   createWindow()
 })

src/components/Aside.vue

@@ -0,0 +1,77 @@
+<template>
+  <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">{{$t('view')}}</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>
+          <path d="M4.03589 6.20575L9.68257 15.9861"></path>
+          <path d="M13.0359 2.20575L7.37891 12.004"></path>
+          <path d="M10.9641 21.7942L16.6146 12.0074"></path>
+          <path d="M19.9641 17.7942L14.3086 7.99866"></path>
+          <path d="M21 7.98721H9.71844"></path>
+        </g>
+      </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">{{$t('play')}}</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">{{$t('star')}}</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>
+    <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">{{$t('setting')}}</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>
+    </span>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+export default {
+  name: 'Aside',
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW']),
+    changeView (e) {
+      this.view = e
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.aside{
+  width: 60px;
+  height: 100%;
+  user-select: none;
+  -webkit-app-region: drag;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  span{
+    -webkit-app-region: no-drag;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+  }
+}
+</style>

src/components/Detail.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="detail">
+    <div class="detail-content">
+      <div class="detail-header">
+        <span class="detail-title">{{$t('detail')}}</span>
+        <span class="detail-close zy-svg" @click="closeDetail">
+          <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">{{$t('close')}}</title>
+            <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
+          </svg>
+        </span>
+      </div>
+      <div class="detail-body zy-scroll" v-show="!loading" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
+        <div class="info" v-html="vDetail.info"></div>
+        <div class="desc" v-html="vDetail.desc" v-if="show.desc"></div>
+        <div class="m3u8_urls">
+          <div class="title">{{$t('play')}}:</div>
+          <div class="box">
+            <span v-for="(i, j) in vDetail.m3u8_urls" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
+          </div>
+        </div>
+        <div class="mp4_urls" v-if="show.download">
+          <div class="title">{{$t('download')}}:</div>
+          <div class="box">
+            <span v-for="(i, j) in vDetail.mp4_urls" :key="j" @click="download(i)">{{i | ftName}}</span>
+            <span @click="allDownload" v-show="vDetail.mp4_urls.length > 1">{{$t('all_download')}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="detail-mask zy-loading" v-show="loading">
+        <div class="loader"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import tools from '../lib/site/tools'
+const { clipboard } = require('electron')
+export default {
+  name: 'detail',
+  data () {
+    return {
+      scroll: false,
+      loading: true,
+      vDetail: {},
+      show: {
+        desc: false,
+        download: false
+      }
+    }
+  },
+  filters: {
+    ftName (e) {
+      const name = e.split('$')[0]
+      return name
+    }
+  },
+  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)
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL']),
+    closeDetail () {
+      this.detail.show = false
+    },
+    getDetail () {
+      tools.detail_get(this.detail.v.site, this.detail.v.detail).then(res => {
+        this.vDetail = res
+        if (res.desc.length > 0) {
+          this.show.desc = true
+        }
+        if (res.mp4_urls.length > 0) {
+          this.show.download = true
+        }
+        this.$nextTick(() => {
+          this.loading = false
+        })
+      })
+    },
+    playEvent (n) {
+      const v = { ...this.detail.v }
+      v.index = n
+      this.video = v
+      this.detail.show = false
+      this.view = 'Play'
+    },
+    download (e) {
+      const name = e.split('$')[0]
+      const txt = encodeURI(e.split('$')[1])
+      clipboard.writeText(txt)
+      this.$m.success(name + this.$t('copy_success'))
+    },
+    allDownload () {
+      const urls = [...this.vDetail.mp4_urls]
+      let txt = ''
+      for (const i of urls) {
+        const url = encodeURI(i.split('$')[1])
+        txt += (url + '\n')
+      }
+      clipboard.writeText(txt)
+      this.$m.success(this.$t('copy_success'))
+    }
+  },
+  created () {
+    this.getDetail()
+  }
+}
+</script>
+<style lang="scss">
+.detail{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 680px;
+  z-index: 999;
+  .detail-content{
+    height: 680px;
+    padding: 0 60px;
+    position: relative;
+    .detail-header{
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 -40px;
+      .detail-title{
+        font-size: 16px;
+      }
+      .detail-close{
+        cursor: pointer;
+      }
+    }
+    .detail-body{
+      height: 630px;
+      overflow-y: auto;
+      .info{
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        width: 955px;
+        padding: 10px;
+        border: 1px solid;
+        border-radius: 2px;
+        margin-bottom: 10px;
+        .vodImg{
+          width: 200px;
+          img{
+            width: 100%;
+            height: auto;
+          }
+        }
+        .vodAd{
+          display: none;
+        }
+        .vodInfo{
+          flex: 1;
+          margin-left: 20px;
+          overflow: hidden;
+          .vodh{
+            margin-bottom: 6px;
+            h2{
+              display: inline-block;
+              margin: 0;
+            }
+            span{
+              font-size: 12px;
+              margin-left: 10px;
+            }
+            label{
+              font-size: 20px;
+              font-weight: bold;
+              margin-left: 20px;
+            }
+          }
+          .cont, .tags{
+            display: none;
+          }
+          ul{
+            padding: 0;
+            margin: 0;
+          }
+          a{
+            display: none;
+            pointer-events: none;
+          }
+          li{
+            list-style: none;
+            font-size: 14px;
+            line-height: 18px;
+            height: 18px;
+            overflow: hidden;
+            span{
+              word-wrap: nowrap;
+            }
+          }
+        }
+        .whitetitle{
+          width: 100%;
+          font-size: 22px;
+          font-weight: bold;
+          margin: 4px 0;
+        }
+        .people{
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          .left{
+            width: 200px;
+            img{
+              width: 100%;
+              height: auto;
+            }
+          }
+          .right{
+            flex: 1;
+            margin-left: 20px;
+            overflow: hidden;
+            p{
+              font-size: 14px;
+            }
+            a{
+              pointer-events: none;
+              text-decoration: none;
+            }
+          }
+        }
+      }
+      .desc{
+        border: 1px solid;
+        padding: 10px;
+        width: 955px;
+        margin-bottom: 10px;
+        border-radius: 2px;
+        font-size: 14px;
+        line-height: 20px;
+      }
+      .m3u8_urls, .mp4_urls{
+        border: 1px solid;
+        padding: 10px;
+        width: 955px;
+        margin-bottom: 10px;
+        border-radius: 2px;
+        .title{
+          font-size: 16px;
+        }
+        .box{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          span{
+            font-size: 12px;
+            border: 1px solid;
+            border-radius: 2px;
+            cursor: pointer;
+            margin: 6px 6px 0px 0px;
+            padding: 8px 22px;
+          }
+          &::after {
+            content: '';
+            flex: 1;
+          }
+        }
+      }
+      .mp4_urls{
+        margin-bottom: 10px;
+      }
+    }
+    .detail-mask{
+      width: 980px;
+      height: 600px;
+      position: absolute;
+      top: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .loader {
+        font-size: 8px;
+        width: 1em;
+        height: 1em;
+        border-radius: 50%;
+        position: relative;
+        text-indent: -9999em;
+        animation: load4 1.3s infinite linear;
+        transform: translateZ(0);
+      }
+      @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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Film.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="film">
+    <div class="top" v-if="top">
+      <!-- site -->
+      <div class="zy-select" @mouseleave="show.site = false">
+        <div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
+        <div class="vs-options" v-show="show.site">
+          <ul>
+            <li :class="site === j ? 'active' : ''" v-for="(i, j) in sites" :key="j" @click="siteClick(i)">{{ i.name }}</li>
+          </ul>
+        </div>
+      </div>
+      <!-- tags -->
+      <div class="zy-select" @mouseleave="show.tags = false" v-if="site.tags.length > 0">
+        <div class="vs-placeholder" @click="show.tags = true">{{site.tags[tag].title}}</div>
+        <div class="vs-options" v-show="show.tags">
+          <ul>
+            <li :class="tag === j ? 'active' : ''" v-for="(i, j) in site.tags" :key="j" @click="tagClick(i, j)">{{ i.title }}</li>
+          </ul>
+        </div>
+      </div>
+      <!-- type -->
+      <div class="zy-select" @mouseleave="show.type = false" v-if="site.tags[tag].children.length > 0">
+        <div class="vs-placeholder" @click="show.type = true">{{typeName}}</div>
+        <div class="vs-options" v-show="show.type">
+          <ul>
+            <li :class="type === j ? 'active' : ''" v-for="(i, j) in site.tags[tag].children" :key="j" @click="typeClick(i, j)">{{ i.title }}</li>
+          </ul>
+        </div>
+      </div>
+      <div :class="[inputFocus ? 'active ': ''] + 'search'" @mouseover="inputFocus = true" @mouseleave="inputFocus = false">
+        <div class="search-icon">
+          <span class="zy-svg">
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="searchIconTitle">
+              <title id="searchIconTitle">Search</title>
+              <path d="M14.4121122,14.4121122 L20,20"></path>
+              <circle cx="10" cy="10" r="6"></circle>
+            </svg>
+          </span>
+        </div>
+        <input type="text" class="search-box" v-model="keywords" @keypress.enter="searchEvent">
+      </div>
+    </div>
+    <div class="middle">
+      <div class="zy-table">
+        <div class="tHead">
+          <span class="name">{{$t('videoName')}}</span>
+          <span class="type">{{$t('type')}}</span>
+          <span class="time">{{$t('time')}}</span>
+          <span class="operate">{{$t('operate')}}</span>
+        </div>
+        <div class="tBody zy-scroll">
+          <ul v-show="!tb.loading">
+            <li v-for="(i, j) in tb.list" :key="j" @click="detailEvent(i)">
+              <span class="name">{{i.name}}</span>
+              <span class="type">{{i.type}}</span>
+              <span class="time">{{i.time}}</span>
+              <span class="operate">
+                <span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
+                <span class="btn" @click.stop="starEvent(i)">{{$t('star')}}</span>
+                <span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
+              </span>
+            </li>
+          </ul>
+          <div class="tBody-mask zy-loading" v-show="tb.loading">
+            <div class="loader"></div>
+          </div>
+        </div>
+        <div class="tFooter">
+          <span class="tFooter-span">今日更新: {{ tb.update }} 条</span>
+          <el-pagination small :page-size="tb.size" :total="tb.total" :current-page="tb.page" @current-change="tbPageChange" layout="total, prev, pager, next, jumper"></el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { sites, getSite } from '../lib/site/sites'
+import tools from '../lib/site/tools'
+import video from '../lib/dexie/video'
+import setting from '../lib/dexie/setting'
+export default {
+  name: 'film',
+  data () {
+    return {
+      sites: sites,
+      site: {},
+      top: false,
+      tag: 0,
+      type: 0,
+      typeName: '',
+      keywords: '',
+      id: '',
+      show: {
+        site: false,
+        tags: false,
+        type: false
+      },
+      inputFocus: false,
+      tb: {
+        list: [],
+        page: 1,
+        size: 50,
+        total: 0,
+        update: 0,
+        loading: true
+      }
+    }
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    gSite: {
+      get () {
+        return this.$store.getters.getSite
+      },
+      set (val) {
+        this.SET_SITE(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    }
+  },
+  watch: {
+    gSite (n, o) {
+      const s = getSite(n)
+      this.siteClick(s)
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_SITE', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    init () {
+      setting.find().then(res => {
+        this.site = getSite(res.site)
+        this.top = true
+        tools.film_get(res.site).then(tRes => {
+          this.tb.list = tRes.list
+          this.tb.total = tRes.total
+          this.tb.update = tRes.update
+          this.tb.loading = false
+        })
+      })
+    },
+    siteClick (e) {
+      this.site = e
+      this.tb.update = 0
+      this.tb.total = 0
+      this.tag = 0
+      this.id = e.tags[0].id
+      this.tb.loading = true
+      this.show.site = false
+      tools.film_get(e.key, this.id).then(res => {
+        this.tb.list = res.list
+        this.tb.total = res.total
+        this.tb.update = res.update
+        this.tb.loading = false
+      })
+    },
+    tagClick (e, n) {
+      this.tb.update = 0
+      this.tb.total = 0
+      this.tag = n
+      this.id = e.id
+      this.typeName = 'All'
+      this.tb.loading = true
+      this.show.tags = false
+      tools.film_get(this.site.key, this.id).then(res => {
+        this.tb.list = res.list
+        this.tb.total = res.total
+        this.tb.update = res.update
+        this.tb.loading = false
+      })
+    },
+    typeClick (e, n) {
+      this.tb.update = 0
+      this.tb.total = 0
+      this.type = n
+      this.typeName = e.title
+      this.id = e.id
+      this.tb.loading = true
+      this.show.type = false
+      tools.film_get(this.site.key, this.id).then(res => {
+        this.tb.list = res.list
+        this.tb.total = res.total
+        this.tb.update = res.update
+        this.tb.loading = false
+      })
+    },
+    searchEvent () {
+      const flag = this.site.search
+      if (flag === '') {
+        this.$m.warning(this.$t('not_support_search'))
+        return false
+      }
+      this.tb.loading = true
+      this.tb.update = 0
+      this.tb.total = 0
+      tools.search_get(this.site.key, this.keywords).then(res => {
+        this.tb.list = res.list
+        this.tb.total = res.total
+        this.tb.loading = false
+      })
+    },
+    detailEvent (e) {
+      this.detail = {
+        show: true,
+        v: e
+      }
+    },
+    playEvent (e) {
+      this.video = e
+      this.view = 'Play'
+    },
+    starEvent (e) {
+      video.find({ detail: e.detail }).then(res => {
+        if (res) {
+          this.$m.warning(this.$t('exists'))
+        } else {
+          video.add(e).then(res => {
+            this.$m.success(this.$t('star_success'))
+          })
+        }
+      })
+    },
+    shareEvent (e) {
+      this.share = {
+        show: true,
+        v: e
+      }
+    },
+    tbPageChange (e) {
+      this.tb.loading = true
+      this.tb.page = e
+      tools.film_get(this.site.key, this.id, this.tb.page).then(res => {
+        this.tb.list = res.list
+        this.tb.loading = false
+      })
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.film{
+  height: 670px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  animation: viewFadeIn 1s ease-in both;
+  .top{
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .search{
+      width: 200px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 15px;
+      svg{
+        width: 20px;
+        height: 20px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .search-icon{
+        width: 40px;
+        height: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .search-box{
+        width: 160px;
+        height: 30px;
+        border-radius: 20px;
+        border: none;
+        text-indent: 2px;
+        font-size: 14px;
+        &:focus{
+          outline: none;
+          border: none;
+        }
+      }
+    }
+  }
+  .middle{
+    height: 620px;
+    width: 100%;
+    margin-top: 10px;
+    padding-bottom: 0px;
+    border-radius: 5px;
+  }
+}
+</style>

src/components/Frame.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="frame">
+    <span class="min" @click="frameClickEvent('min')"></span>
+    <span class="close" @click="frameClickEvent('close')"></span>
+  </div>
+</template>
+<script>
+const ipc = require('electron').ipcRenderer
+export default {
+  name: 'frame',
+  methods: {
+    frameClickEvent (e) {
+      ipc.send(e)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.frame{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  user-select: none;
+  -webkit-app-region: drag;
+  span{
+    -webkit-app-region: no-drag;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-left: 10px;
+    cursor: pointer;
+    opacity: 0.5;
+    &: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;
+      }
+    }
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Play.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="play">
+    <div class="box">
+      <div class="title">{{name}}</div>
+      <div id="xg"></div>
+      <div class="more" v-show="more">
+        <span class="zy-svg" @click="nextEvent" v-show="showNext">
+          <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">{{$t('next')}}</title>
+            <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
+          </svg>
+        </span>
+        <span class="zy-svg" @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.listData.length > 0">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
+            <title id="dashboardIconTitle">{{$t('play_list')}}</title>
+            <rect width="20" height="20" x="2" y="2"></rect>
+            <path d="M11 7L17 7M11 12L17 12M11 17L17 17"></path>
+            <line x1="7" y1="7" x2="7" y2="7"></line>
+            <line x1="7" y1="12" x2="7" y2="12"></line>
+            <line x1="7" y1="17" x2="7" y2="17"></line>
+          </svg>
+        </span>
+        <span class="zy-svg" @click="historyEvent" :class="right.type === 'history' ? 'active' : ''">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="timeIconTitle">
+            <title id="timeIconTitle">{{$t('history')}}</title>
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 5 12 12 16 16"></polyline>
+          </svg>
+        </span>
+        <span class="zy-svg" @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.listData.length > 0">
+          <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">{{$t('star')}}</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>
+        <span class="zy-svg" @click="detailEvent" v-show="right.listData.length > 0">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="feedIconTitle">
+            <title id="feedIconTitle">{{$t('detail')}}</title>
+            <circle cx="7.5" cy="7.5" r="2.5"></circle>
+            <path d="M22 13H2"></path>
+            <path d="M18 6h-5m5 3h-5"></path>
+            <path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"></path>
+          </svg>
+        </span>
+        <span class="zy-svg" @click="smallEvent" v-show="right.listData.length > 0">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
+            <title id="tvIconTitle">{{$t('mini')}}</title>
+            <polygon points="20 8 20 20 4 20 4 8"></polygon>
+            <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
+          </svg>
+        </span>
+        <span class="zy-svg" @click="shareEvent" v-show="right.listData.length > 0">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle">
+            <title id="qrIconTitle">{{$t('share')}}</title>
+            <rect x="10" y="3" width="7" height="7" transform="rotate(90 10 3)"></rect>
+            <rect width="1" height="1" transform="matrix(-1 0 0 1 7 6)"></rect>
+            <rect x="10" y="14" width="7" height="7" transform="rotate(90 10 14)"></rect>
+            <rect x="6" y="17" width="1" height="1"></rect>
+            <rect x="14" y="20" width="1" height="1"></rect>
+            <rect x="17" y="17" width="1" height="1"></rect>
+            <rect x="14" y="14" width="1" height="1"></rect>
+            <rect x="20" y="17" width="1" height="1"></rect>
+            <rect x="20" y="14" width="1" height="1"></rect>
+            <rect x="20" y="20" width="1" height="1"></rect>
+            <rect x="21" y="3" width="7" height="7" transform="rotate(90 21 3)"></rect>
+            <rect x="17" y="6" width="1" height="1"></rect>
+          </svg>
+        </span>
+      </div>
+    </div>
+    <transition name="slideX">
+      <div v-if="right.show" class="list">
+        <div class="list-top">
+          <span class="list-top-title">{{ right.type === 'list' ? $t('play_list') : $t('history') }}</span>
+          <span class="list-top-close zy-svg" @click="closeEvent">
+            <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">{{$t('close')}}</title>
+              <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
+            </svg>
+          </span>
+        </div>
+        <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
+          <ul v-show="right.type === 'list'" class="list-item">
+            <li v-show="right.listData.length === 0">{{$t('no_data')}}</li>
+            <li @click="listItemEvent(j)" :class="video.index === j ? 'active' : ''" v-for="(i, j) in right.listData" :key="j">{{i | ftName}}</li>
+          </ul>
+          <ul v-show="right.type === 'history'" class="list-history">
+            <li v-show="right.historyData.length > 1" @click="clearAll">{{$t('clear_data')}}</li>
+            <li v-show="right.historyData.length === 0">{{$t('no_data')}}</li>
+            <li @click="historyItemEvent(m)" :class="video.detail === m.detail ? 'active' : ''" v-for="(m, n) in right.historyData" :key="n"><span class="title">{{m.name}}</span><span @click.stop="removeItem(m)" class="detail-delete">{{$t('delete')}}</span></li>
+          </ul>
+        </div>
+      </div>
+    </transition>
+    <div class="play-mask" v-if="right.listData.length === 0 && right.historyData.length === 0">{{$t('no_history')}}</div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import tools from '../lib/site/tools'
+import history from '../lib/dexie/history'
+import video from '../lib/dexie/video'
+import mini from '../lib/dexie/mini'
+import 'xgplayer'
+import Hls from 'xgplayer-hls.js'
+const { ipcRenderer: ipc } = require('electron')
+export default {
+  name: 'play',
+  data () {
+    return {
+      xg: null,
+      right: {
+        show: false,
+        type: '',
+        listData: [],
+        historyData: []
+      },
+      config: {
+        id: 'xg',
+        lang: 'zh-cn',
+        url: '',
+        fluid: true,
+        autoplay: false,
+        videoInit: true,
+        screenShot: true,
+        keyShortcut: 'on',
+        crossOrigin: true,
+        defaultPlaybackRate: 1,
+        playbackRate: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]
+      },
+      name: '',
+      timer: null,
+      scroll: false,
+      more: true,
+      showNext: false,
+      isStar: false,
+      isTop: false
+    }
+  },
+  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)
+      }
+    }
+  },
+  filters: {
+    ftName (e) {
+      return e.split('$')[0]
+    }
+  },
+  watch: {
+    view () {
+      this.right.show = false
+      this.right.type = ''
+    },
+    video: {
+      handler () {
+        this.getUrls()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    getUrls () {
+      if (this.timer !== null) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      if (this.xg) {
+        this.xg.pause()
+      }
+      this.changeVideo()
+      tools.detail_get(this.video.site, this.video.detail).then(res => {
+        this.name = this.video.name
+        this.right.listData = res.m3u8_urls
+        if (res.m3u8_urls.length > 1) {
+          const m3 = res.m3u8_urls
+          const arr = []
+          for (const i of m3) {
+            arr.push(i.split('$')[1])
+          }
+          this.xg.src = arr[this.video.index]
+          this.showNext = true
+        } else {
+          const link = res.m3u8_urls[this.video.index]
+          const src = link.split('$')[1]
+          this.xg.src = src
+          this.showNext = false
+        }
+        const currentTime = this.video.currentTime
+        if (currentTime !== '') {
+          this.xg.play()
+          this.xg.once('playing', () => {
+            this.xg.currentTime = currentTime
+          })
+        } else {
+          this.xg.play()
+        }
+        this.onPlayVideo()
+        this.xg.once('ended', () => {
+          if (res.m3u8_urls.length > 1 && (res.m3u8_urls.length - 1 > this.video.index)) {
+            this.video.index++
+          }
+        })
+      }).catch(err => {
+        this.$m.error(err)
+      })
+    },
+    changeVideo () {
+      this.checkStar()
+      this.checkTop()
+      this.name = ''
+    },
+    checkStar () {
+      video.find({ detail: this.video.detail }).then(res => {
+        if (res) {
+          this.isStar = true
+        } else {
+          this.isStar = false
+        }
+      })
+    },
+    checkTop () {
+      ipc.send('checkTop')
+      ipc.on('isTop', (e, flag) => {
+        this.isTop = flag
+      })
+    },
+    onPlayVideo () {
+      this.more = true
+      const h = { ...this.video }
+      history.find({ detail: h.detail }).then(res => {
+        if (res) {
+          h.id = res.id
+          history.update(res.id, h)
+        } else {
+          h.currentTime = ''
+          delete h.id
+          history.add(h)
+        }
+      })
+      this.timerEvent(h.detail)
+    },
+    timerEvent (d) {
+      this.timer = setInterval(() => {
+        history.find({ detail: d }).then(res => {
+          if (res) {
+            const h = { ...this.video }
+            h.currentTime = this.xg.currentTime
+            delete h.id
+            history.update(res.id, h)
+          }
+        })
+      }, 10000)
+    },
+    closeEvent () {
+      this.right.show = false
+      this.right.type = ''
+    },
+    nextEvent () {
+      const v = { ...this.video }
+      const i = v.index + 1
+      if (i < this.right.listData.length) {
+        this.video.index++
+      } else {
+        this.$m.warning(this.$t('last_video'))
+      }
+    },
+    listEvent () {
+      if (this.right.type === 'list') {
+        this.right.show = false
+        this.right.type = ''
+      } else {
+        this.right.show = true
+        this.right.type = 'list'
+      }
+    },
+    historyEvent () {
+      if (this.right.type === 'history') {
+        this.right.show = false
+        this.right.type = ''
+      } else {
+        this.right.show = true
+        this.right.type = 'history'
+      }
+      history.all().then(res => {
+        this.right.historyData = res.reverse()
+      })
+    },
+    starEvent () {
+      video.find({ detail: this.video.detail }).then(res => {
+        if (res !== undefined) {
+          video.remove(res.id).then(r => {
+            this.$m.info(this.$t('delete_success'))
+            this.isStar = false
+          })
+        } else {
+          const v = { ...this.video }
+          if (v.id) {
+            delete v.id
+          }
+          video.add(v).then(r => {
+            this.$m.success(this.$t('star_success'))
+            this.isStar = true
+          })
+        }
+      })
+    },
+    detailEvent () {
+      this.detail = {
+        show: true,
+        v: this.video
+      }
+    },
+    smallEvent () {
+      this.xg.pause()
+      mini.find().then(res => {
+        const d = { ...this.video }
+        d.currentTime = this.xg.currentTime
+        d.id = 0
+        if (res) {
+          mini.update(d)
+        } else {
+          mini.add(d)
+        }
+        ipc.send('min')
+        ipc.send('mini')
+      })
+    },
+    shareEvent () {
+      this.share = {
+        show: true,
+        v: this.video
+      }
+    },
+    clearAll () {
+      history.clear().then(res => {
+        this.right.historyData = []
+      })
+    },
+    listItemEvent (n) {
+      this.video.index = n
+      this.right.show = false
+      this.right.type = ''
+    },
+    historyItemEvent (e) {
+      this.video = e
+      this.right.show = false
+      this.right.type = ''
+    },
+    removeItem (e) {
+      history.remove(e.id).then(res => {
+        history.all().then(e => {
+          this.right.historyData = e.reverse()
+        })
+      })
+    }
+  },
+  mounted () {
+    this.xg = new Hls(this.config)
+    history.all().then(res => {
+      this.right.historyData = res
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+.play{
+  position: relative;
+  height: 660px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  .box{
+    width: 92%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .title{
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .more{
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      span{
+        display: flex;
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+  .list{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 100%;
+    z-index: 555;
+    border-radius: 3px;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    .list-top{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 30px;
+      .list-top-title{
+        font-size: 16px;
+      }
+      .list-top-close{
+        display: inline-block;
+        cursor: pointer;
+      }
+    }
+    .list-body{
+      flex: 1;
+      overflow-y: auto;
+      ul{
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        li{
+          position: relative;
+          height: 28px;
+          width: 100%;
+          line-height: 28px;
+          padding-left: 10px;
+          font-size: 14px;
+          cursor: pointer;
+          .title{
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 231px;
+          }
+          .detail-delete{
+            display: none;
+            position: absolute;
+            right: 0;
+            height: 28px;
+            width: 50px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+  .slideX-enter-active, .slideX-leave-active{
+    transition: all .5s ease-in-out;
+  }
+  .slideX-enter, .slideX-leave-to{
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  .play-mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 900;
+    display: flex;
+    font-size: 14px;
+    border-radius: 5px;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/components/Setting.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="setting">
+    <div class="setting-box zy-scroll" v-if="show.setting">
+      <div class="logo"><img src="@/assets/image/logo.png"></div>
+      <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues/24">{{$t('issues')}}</a></div>
+      <div class="change">
+        <div class="zy-select" @mouseleave="show.language = false">
+          <div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
+          <div class="vs-options" v-show="show.language">
+            <ul>
+              <li :class="s.language === i.key ? 'active' : ''" v-for="(i, j) in languages" :key="j" @click="languageClick(i.key)">{{ i.name }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="zy-select" @mouseleave="show.site = false">
+          <div class="vs-placeholder" @click="show.site = true">{{$t('default_site')}}</div>
+          <div class="vs-options" v-show="show.site">
+            <ul>
+              <li :class="s.site === i.key ? 'active' : ''" v-for="(i, j) in sites" :key="j" @click="siteClick(i.key)">{{ i.name }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="theme">
+        <div class="title">{{$t('theme')}}</div>
+        <div class="theme-box">
+          <div @click="changeTheme('light')" class="theme-item light">
+            <div class="theme-image">
+              <img src="../assets/image/light.png" alt="">
+            </div>
+            <div class="theme-name">Light</div>
+          </div>
+          <div @click="changeTheme('dark')" class="theme-item dark">
+            <div class="theme-image">
+              <img src="../assets/image/dark.png" alt="">
+            </div>
+            <div class="theme-name">Dark</div>
+          </div>
+        </div>
+      </div>
+      <div class="qrcode">
+        <div class="title">{{$t('donate')}}</div>
+        <div class="qrcode-box">
+          <img class="qrcode-item" src="../assets/image/alipay.png">
+          <img class="qrcode-item" src="../assets/image/wepay.jpg">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import setting from '../lib/dexie/setting'
+import { sites } from '../lib/site/sites'
+import '../lib/cloud/index.js'
+export default {
+  name: 'setting',
+  data () {
+    return {
+      s: {},
+      languages: [
+        {
+          key: 'zhCn',
+          name: '中文'
+        },
+        {
+          key: 'en',
+          name: 'English'
+        }
+      ],
+      sites: sites,
+      show: {
+        setting: false,
+        language: false,
+        site: false
+      }
+    }
+  },
+  computed: {
+    theme: {
+      get () {
+        return this.$store.getters.getTheme
+      },
+      set (val) {
+        this.SET_THEME(val)
+      }
+    },
+    language: {
+      get () {
+        return this.$store.getters.getLanguage
+      },
+      set (val) {
+        this.SET_LANGUAGE(val)
+      }
+    },
+    site: {
+      get () {
+        return this.$store.getters.getSite
+      },
+      set (val) {
+        this.SET_SITE(val)
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_THEME', 'SET_LANGUAGE', 'SET_SITE']),
+    languageClick (e) {
+      this.language = e
+      this.show.language = false
+      this.$i18n.locale = e
+      this.s.language = e
+      setting.update(this.s).then(res => {
+        this.$m.success(this.$t('set_success'))
+      })
+    },
+    siteClick (e) {
+      this.site = e
+      this.show.site = false
+      this.s.site = e
+      setting.update(this.s).then(res => {
+        this.$m.success(this.$t('set_success'))
+      })
+    },
+    changeTheme (e) {
+      this.theme = e
+      this.s.theme = e
+      setting.update(this.s).then(res => {
+        this.$m.success(this.$t('set_success'))
+      })
+    }
+  },
+  created () {
+    setting.find().then(res => {
+      this.s = res
+      this.theme = res.theme
+      this.$i18n.locale = this.s.language
+      this.show.setting = true
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+.setting{
+  height: 660px;
+  width: 100%;
+  padding: 20px 0;
+  .setting-box{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    overflow-y: auto;
+  }
+ .logo{
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+    img{
+      width: 120px;
+      height: auto;
+    }
+  }
+  .info{
+    width: 100%;
+    margin-top: 20px;
+    text-align: center;
+    a{
+      text-decoration: none;
+      margin: 0 10px;
+      font-size: 14px;
+    }
+  }
+  .change{
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 20px;
+    margin-top: 40px;
+    .zy-select{
+      margin-right: 20px;
+    }
+  }
+  .theme{
+    width: 100%;
+    padding-left: 20px;
+    margin-top: 20px;
+    .theme-box{
+      display: flex;
+      justify-content: flex-start;
+      margin-top: 10px;
+      .theme-item{
+        width: 200px;
+        height: 180px;
+        margin-right: 20px;
+        cursor: pointer;
+        border-radius: 2px;
+        .theme-image{
+          width: 180px;
+          margin: 10px auto;
+          img{
+            width: 100%;
+          }
+        }
+        .theme-name{
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .qrcode{
+    width: 100%;
+    padding-left: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    .qrcode-box{
+      display: flex;
+      justify-content: flex-start;
+      margin-top: 10px;
+      .qrcode-item{
+        width: auto;
+        height: 300px;
+        margin-right: 20px;
+        border-radius: 2px;
+      }
+    }
+  }
+}
+</style>

src/components/Share.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="share" id="share" @click="shareClickEvent">
+    <div class="left">
+      <img :src="this.card.img" alt="">
+    </div>
+    <div class="right">
+      <div class="title">{{ card.name }}</div>
+      <qrcode-vue id="qr" :value="value" :size="160" level="L" />
+      <div class="tips">
+        <p>{{$t('qr_tips')}}</p>
+        <p><img src="@/assets/image/logo.png"></p>
+        <p class="zy">{{$t('zy_tips')}}</p>
+      </div>
+    </div>
+    <div class="share-mask" v-show="loading">
+      <div class="loader"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import tools from '../lib/site/tools'
+import QrcodeVue from 'qrcode.vue'
+import html2canvas from 'html2canvas'
+const { clipboard, nativeImage } = require('electron')
+export default {
+  name: 'share',
+  data () {
+    return {
+      card: {
+        img: '',
+        name: '',
+        png: ''
+      },
+      value: 'https://www.baidu.com',
+      loading: true
+    }
+  },
+  components: {
+    QrcodeVue
+  },
+  computed: {
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    }
+  },
+  watch: {
+    share: {
+      handler () {
+        this.getDetail()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_SHARE']),
+    getDetail () {
+      this.loading = true
+      tools.detail_get(this.share.v.site, this.share.v.detail).then(res => {
+        const info = res.info
+        const parser = new DOMParser()
+        const html = parser.parseFromString(info, 'text/html')
+        const img = html.querySelector('img').src
+        this.card.img = img
+        this.card.name = this.share.v.name
+        const urls = res.m3u8_urls
+        const url = urls[this.share.v.index].split('$')[1]
+        this.value = 'http://zyplayer.fun/player/player.html?url=' + url + '&title=' + this.share.v.name
+        this.loading = false
+        this.$nextTick(() => {
+          const dom = document.getElementById('share')
+          html2canvas(dom, { allowTaint: true, useCORS: true }).then(res => {
+            const png = res.toDataURL('image/png')
+            const p = nativeImage.createFromDataURL(png)
+            clipboard.writeImage(p)
+            this.$m.success(this.$t('share_tips'))
+            this.share.show = true
+          })
+        })
+      })
+    },
+    shareClickEvent () {
+      this.share = {
+        show: false,
+        v: {}
+      }
+    }
+  },
+  created () {
+    this.getDetail()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.share{
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  width: 540px;
+  height: 360px;
+  border-radius: 2px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  z-index: 888;
+  .left, .right{
+    width: 50%;
+    height: 100%;
+  }
+  .left{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 320px;
+      width: auto;
+      max-width: 240px;
+    }
+  }
+  .right{
+    .title{
+      font-size: 18px;
+      margin-bottom: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    #qr{
+      text-align: center;
+    }
+    .tips{
+      font-size: 14px;
+      text-align: center;
+      img{
+        width: 50px;
+      }
+      .zy{
+        font-size: 12px;
+      }
+    }
+  }
+  .share-mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .loader {
+      color: #823aa055;
+      font-size: 8px;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      position: relative;
+      text-indent: -9999em;
+      animation: load4 1.3s infinite linear;
+      transform: translateZ(0);
+    }
+    @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;
+      }
+      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;
+      }
+      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;
+      }
+      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;
+      }
+      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;
+      }
+      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;
+      }
+      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;
+      }
+      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;
+      }
+    }
+  }
+}
+</style>

src/components/Star.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="star">
+    <div class="zy-table">
+      <div class="tHead">
+        <span class="name">{{$t('videoName')}}</span>
+        <span class="type">{{$t('type')}}</span>
+        <span class="time">{{$t('time')}}</span>
+        <span class="from">{{$t('from')}}</span>
+        <span class="operate" style="width: 170px">{{$t('operate')}}</span>
+      </div>
+      <div class="tBody zy-scroll">
+        <ul v-show="!loading">
+          <li v-for="(i, j) in data" :key="j" @click="detailEvent(i)">
+            <span class="name">{{i.name}}</span>
+            <span class="type">{{i.type}}</span>
+            <span class="time">{{i.time}}</span>
+            <span class="from">{{i.site | ftSite}}</span>
+            <span class="operate" style="width: 170px">
+              <span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
+              <span class="btn" @click.stop="deleteEvent(i)">{{$t('delete')}}</span>
+              <span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
+              <span class="btn" @click.stop="updateEvent(i)">{{$t('sync')}}</span>
+            </span>
+          </li>
+        </ul>
+        <div class="tBody-mask" v-show="loading">
+          <div class="loader"></div>
+        </div>
+      </div>
+      <div class="tFooter">
+        <span class="tFooter-span">{{data.length}} {{$t('total')}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import tools from '../lib/site/tools'
+import video from '../lib/dexie/video'
+import { sites, getSite } from '../lib/site/sites'
+export default {
+  name: 'star',
+  data () {
+    return {
+      sites: sites,
+      data: [],
+      loading: true,
+      checkFlag: false
+    }
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    }
+  },
+  filters: {
+    ftSite (e) {
+      const name = getSite(e).name
+      return name
+    }
+  },
+  watch: {
+    view () {
+      this.getAllStar()
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    detailEvent (e) {
+      this.detail = {
+        show: true,
+        v: e
+      }
+    },
+    playEvent (e) {
+      this.video = e
+      this.view = 'Play'
+    },
+    deleteEvent (e) {
+      video.remove(e.id).then(res => {
+        if (res) {
+          this.$m.warning(this.$t('delete_failed'))
+        } else {
+          this.$m.success(this.$t('delete_success'))
+        }
+        this.getAllStar()
+      })
+    },
+    shareEvent (e) {
+      this.share = {
+        show: true,
+        v: e
+      }
+    },
+    updateEvent (e) {
+      tools.detail_get(e.site, e.detail).then(res => {
+        const nameOne = e.name.replace(/\s*/g, '')
+        const nameTwo = res.name.replace(/\s*/g, '')
+        if (nameOne === nameTwo) {
+          this.$m.info(this.$t('async_failed'))
+        } else {
+          const h = e
+          h.name = res.name
+          video.update(h.id, h).then(res => {
+            this.$m.success(this.$t('async_success'))
+          })
+        }
+      })
+    },
+    getAllStar () {
+      video.all().then(res => {
+        this.data = res.reverse()
+        this.loading = false
+      })
+    }
+  },
+  created () {
+    this.getAllStar()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.star{
+  height: 660px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+}
+</style>

src/components/register.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Aside from './Aside'
+import Detail from './Detail'
+import Film from './Film'
+import Frame from './Frame'
+import Play from './Play'
+import Setting from './Setting'
+import Share from './Share'
+import Star from './Star'
+
+export default {
+  registerComponents () {
+    Vue.component('Aside', Aside)
+    Vue.component('Detail', Detail)
+    Vue.component('Film', Film)
+    Vue.component('Frame', Frame)
+    Vue.component('Play', Play)
+    Vue.component('Setting', Setting)
+    Vue.component('Share', Share)
+    Vue.component('Star', Star)
+  }
+}

src/lib/cloud/index.js

@@ -0,0 +1,32 @@
+import setting from '../dexie/setting'
+
+const os = require('os')
+const macadress = require('macaddress')
+const AV = require('leancloud-storage')
+
+setting.find().then(res => {
+  const cloud = res.cloud
+  if (!cloud) {
+    macadress.one((err, mac) => {
+      if (err) {
+        return false
+      }
+      const system = os.hostname() + ' ' + os.type() + ' ' + os.arch()
+      AV.init({
+        appId: 'X6TRIcMjgOG7EJ0t1l5r9In1-gzGzoHsz',
+        appKey: 'JmkGF9UqkWGQNYDcJ2g1QV1b',
+        serverURL: 'https://x6tricmj.lc-cn-n1-shared.com'
+      })
+      const ZYPlayer = AV.Object.extend('ZYPlayer')
+      const zyPlayer = new ZYPlayer()
+      zyPlayer.set('os', system)
+      zyPlayer.set('mac', mac)
+      zyPlayer.save().then(e => {
+        const id = e.id
+        res.cloud = true
+        res.cloudKey = id
+        setting.update(res)
+      })
+    })
+  }
+})

src/lib/dexie/history.js

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

src/lib/dexie/index.js

@@ -0,0 +1,33 @@
+import Dexie from 'dexie'
+
+const db = new Dexie('ZYDB')
+
+db.version(1).stores({
+  theme: '++id, theme',
+  site: '++id, site',
+  video: '++id, name, type, time, detail, urls, index'
+})
+
+db.version(2).stores({
+  setting: 'id, theme, site, language, cloud, cloudKey',
+  video: '++id, site, name, type, time, detail, index',
+  history: '++id, site, name, type, time, detail, index, currentTime',
+  mini: 'id, site, name, type, time, detail, index, currentTime'
+})
+
+const initData = [{
+  id: 0,
+  theme: 'light',
+  site: 'zuidazy',
+  language: 'zhCn',
+  cloud: false,
+  cloudKey: ''
+}]
+
+db.on('populate', () => {
+  db.setting.bulkAdd(initData)
+})
+
+db.open()
+
+export default db

src/lib/dexie/mini.js

@@ -0,0 +1,13 @@
+import db from './index'
+const { mini } = db
+export default {
+  async add (doc) {
+    return await mini.add(doc)
+  },
+  async find () {
+    return await mini.get({ id: 0 })
+  },
+  async update (docs) {
+    return await mini.update(0, docs)
+  }
+}

src/lib/dexie/setting.js

@@ -0,0 +1,10 @@
+import db from './index'
+const { setting } = db
+export default {
+  async find () {
+    return await setting.get({ id: 0 })
+  },
+  async update (docs) {
+    return await setting.update(0, docs)
+  }
+}

src/lib/dexie/video.js

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

src/lib/element/index.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import { Message, Pagination } from 'element-ui'
+
+Vue.use(Pagination)
+
+Vue.prototype.$m = Message

src/lib/site/tools.js

@@ -0,0 +1,364 @@
+import axios from 'axios'
+import { getSite } from './sites'
+const zy = {
+  key: 'zuidazy', // sites[n] 视频源
+  id: 0, // 视频类型
+  page: 1, // 第几页
+  keywords: '', // 搜索关键字
+  // 获取浏览列表
+  film_get (key, id = 1, page = 1) {
+    return new Promise((resolve, reject) => {
+      const site = getSite(key)
+      let url = ''
+      if (id === 0) {
+        url = site.new.replace(/{page}/, page)
+      } else {
+        url = site.view.replace(/{id}/, id).replace(/{page}/, page)
+      }
+      const type = site.type
+      axios.get(url).then(async res => {
+        const data = res.data
+        if (type === 0) {
+          const zeroData = await this.film_get_type_zero(data, key)
+          resolve(zeroData)
+        }
+        if (type === 1) {
+          const oneData = await this.film_get_type_one(data, key)
+          resolve(oneData)
+        }
+        if (type === 2) {
+          const twoData = await this.film_get_type_two(data, key)
+          resolve(twoData)
+        }
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  film_get_type_zero (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const list = html.querySelectorAll('.xing_vb li')
+        const d = { list: [], total: 0, update: 0 }
+        const url = getSite(key).url
+        for (let i = 1; i < list.length - 1; i++) {
+          const info = {
+            site: key,
+            name: list[i].childNodes[1].innerText,
+            type: list[i].childNodes[3].innerText,
+            time: list[i].childNodes[5].innerText,
+            detail: url + list[i].childNodes[1].querySelector('a').getAttribute('href'),
+            index: 0
+          }
+          d.list.push(info)
+        }
+        d.update = parseInt(html.querySelectorAll('.xing_top_right li strong')[0].innerText)
+        let t = html.querySelector('.pages').innerText
+        t = t.split('条')[0]
+        t = t.split('共')[1]
+        d.total = parseInt(t)
+        resolve(d)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  film_get_type_one (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const list = html.querySelectorAll('.videoContent li')
+        const d = { list: [], total: 0, update: 0 }
+        const url = getSite(key).url
+        for (let i = 0; i < list.length; i++) {
+          const info = {
+            site: key,
+            name: list[i].querySelector('.videoName').innerText,
+            type: list[i].querySelector('.category').innerText,
+            time: list[i].querySelector('.time').innerText,
+            detail: url + list[i].querySelector('.address').getAttribute('href'),
+            index: 0
+          }
+          d.list.push(info)
+        }
+        d.update = parseInt(html.querySelectorAll('.header_list li span')[0].innerText)
+        let t = html.querySelectorAll('.pagination li')
+        t = t[t.length - 2].innerText
+        d.total = parseInt(t) * 50
+        resolve(d)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  film_get_type_two (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const list = html.querySelectorAll('.nr')
+        const d = { list: [], total: 0, update: 0 }
+        const url = getSite(key).url
+        for (let i = 0; i < list.length; i++) {
+          const info = {
+            site: key,
+            name: '',
+            type: list[i].querySelector('.btn_span').innerText,
+            time: list[i].querySelector('.hours').innerText,
+            detail: url + list[i].querySelector('.name').getAttribute('href'),
+            index: 0
+          }
+          let name = list[i].querySelector('.name').innerText
+          name = name.replace(/^\s*|\s*$/g, '')
+          info.name = name
+          d.list.push(info)
+        }
+        d.update = parseInt(html.querySelector('.kfs em').innerText)
+        d.total = parseInt(html.querySelector('.date span').innerText)
+        let t = html.querySelector('.pag2').innerText
+        t = t.split('条')[0]
+        t = t.split('共')[1]
+        d.total = parseInt(t)
+        resolve(d)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  // 获取详情
+  detail_get (key, url) {
+    return new Promise((resolve, reject) => {
+      const type = getSite(key).type
+      axios.get(url).then(async res => {
+        if (type === 0) {
+          const zeroData = await this.detail_get_type_zero(res.data, key)
+          resolve(zeroData)
+        }
+        if (type === 1) {
+          const oneData = await this.detail_get_type_one(res.data, key)
+          resolve(oneData)
+        }
+        if (type === 2) {
+          const twoData = await this.detail_get_type_two(res.data, key)
+          resolve(twoData)
+        }
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  detail_get_type_zero (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const data = {
+          site: key,
+          name: '',
+          info: '',
+          desc: '',
+          m3u8_urls: [],
+          mp4_urls: []
+        }
+        const vodBox = html.querySelector('.vodBox')
+        data.info = vodBox.innerHTML
+        const title = html.querySelector('.vodh h2').innerText
+        const index = html.querySelector('.vodh span').innerText
+        data.name = title + index
+        const vodInfo = html.querySelectorAll('.playBox')
+        for (let i = 0; i < vodInfo.length; i++) {
+          const k = vodInfo[i].innerText
+          if (k.indexOf('剧情介绍') >= 0) {
+            data.desc = vodInfo[i].querySelector('.vodplayinfo').innerHTML
+          }
+        }
+        const vodLi = html.querySelectorAll('.ibox .vodplayinfo li')
+        const m3u8UrlArr = []
+        const mp4UrlArr = []
+        for (let i = 0; i < vodLi.length; i++) {
+          const j = vodLi[i].innerText
+          if (j.indexOf('.m3u8') >= 0) {
+            m3u8UrlArr.push(j)
+          }
+          if (j.indexOf('.mp4') >= 0) {
+            mp4UrlArr.push(j)
+          }
+        }
+        data.m3u8_urls = m3u8UrlArr
+        data.mp4_urls = mp4UrlArr
+        resolve(data)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  detail_get_type_one (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const data = {
+          site: key,
+          name: '',
+          info: '',
+          desc: '',
+          m3u8_urls: [],
+          mp4_urls: []
+        }
+        let name = html.querySelector('.whitetitle').innerText
+        name = name.split('：')[1].replace(/^\s*|\s*$/g, '')
+        data.name = name
+        const vodBox = html.querySelector('.white').innerHTML
+        data.info = vodBox
+        const vodInfo = html.querySelectorAll('.white')
+        for (let i = 0; i < vodInfo.length; i++) {
+          const k = vodInfo[i].innerText
+          if (k.indexOf('剧情介绍') >= 0) {
+            data.desc = vodInfo[i].querySelector('div').innerText
+          }
+        }
+        const vodLi = html.querySelectorAll('.playlist li #m3u8')
+        const m3u8UrlArr = []
+        const mp4UrlArr = []
+        for (let i = 0; i < vodLi.length; i++) {
+          const j = vodLi[i].value
+          if (j.indexOf('.m3u8') >= 0) {
+            m3u8UrlArr.push(j)
+          }
+          if (j.indexOf('.mp4') >= 0) {
+            mp4UrlArr.push(j)
+          }
+        }
+        data.m3u8_urls = m3u8UrlArr
+        data.mp4_urls = mp4UrlArr
+        resolve(data)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  detail_get_type_two (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const data = {
+          site: key,
+          name: '',
+          info: '',
+          desc: '',
+          m3u8_urls: [],
+          mp4_urls: []
+        }
+        const title = html.querySelector('.vodh h2').innerText
+        const index = html.querySelector('.vodh span').innerText
+        data.name = title + index
+        const vodBox = html.querySelector('.vodBox').innerHTML
+        data.info = vodBox
+        data.desc = html.querySelector('.vodplayinfo').innerText
+        const vodLi = html.querySelectorAll('.vodplayinfo li')
+        const m3u8UrlArr = []
+        const mp4UrlArr = []
+        for (let i = 0; i < vodLi.length; i++) {
+          const j = vodLi[i].innerText
+          if (j.indexOf('.m3u8') >= 0) {
+            m3u8UrlArr.push(j)
+          }
+          if (j.indexOf('.mp4') >= 0) {
+            mp4UrlArr.push(j)
+          }
+        }
+        data.m3u8_urls = m3u8UrlArr
+        data.mp4_urls = mp4UrlArr
+        resolve(data)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  // 搜索列表
+  search_get (key, keywords = '', page = 1) {
+    return new Promise((resolve, reject) => {
+      const site = getSite(key)
+      const type = site.type
+      let url = null
+      if (type === 0) {
+        url = site.search.replace(/{page}/, page).replace(/{keywords}/, keywords)
+      }
+      if (type === 1) {
+        url = site.search.replace(/{keywords}/, keywords)
+      }
+      axios.get(url).then(async res => {
+        const data = res.data
+        if (type === 0) {
+          const zeroData = await this.search_get_type_zero(data, key)
+          resolve(zeroData)
+        }
+        if (type === 1) {
+          const oneData = await this.search_get_type_one(data, key)
+          resolve(oneData)
+        }
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  search_get_type_zero (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const list = html.querySelectorAll('.xing_vb li')
+        const d = { list: [], total: 0 }
+        const url = getSite(key).url
+        for (let i = 1; i < list.length - 1; i++) {
+          const info = {
+            site: key,
+            name: list[i].childNodes[1].innerText,
+            type: list[i].childNodes[3].innerText,
+            time: list[i].childNodes[5].innerText,
+            detail: url + list[i].childNodes[1].querySelector('a').getAttribute('href'),
+            index: 0
+          }
+          d.list.push(info)
+        }
+        const t = html.querySelector('.nvc dd').innerText.replace(/[^\d]/g, '')
+        d.total = parseInt(t)
+        resolve(d)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  },
+  search_get_type_one (txt, key) {
+    return new Promise((resolve, reject) => {
+      try {
+        const parser = new DOMParser()
+        const html = parser.parseFromString(txt, 'text/html')
+        const list = html.querySelectorAll('.videoContent li')
+        const d = { list: [], total: 0 }
+        const url = getSite(key).url
+        for (let i = 0; i < list.length; i++) {
+          const info = {
+            site: key,
+            name: list[i].querySelector('.videoName').innerText,
+            type: list[i].querySelector('.category').innerText,
+            time: list[i].querySelector('.time').innerText,
+            detail: url + list[i].querySelector('.address').getAttribute('href'),
+            index: 0
+          }
+          d.list.push(info)
+        }
+        d.total = list.length
+        resolve(d)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  }
+}
+
+export default zy

src/locales/en.json

@@ -0,0 +1,48 @@
+{
+    "zh": "Chinese",
+    "en": "English",
+    "language": "Language",
+    "default_site": "Default Site",
+    "view": "View",
+    "play": "Play",
+    "star": "Star",
+    "setting": "Setting",
+    "exists": "Already exists",
+    "videoName": "Video Name",
+    "type": "Type",
+    "time": "Time",
+    "operate": "Operate",
+    "share": "Share",
+    "detail": "Detail",
+    "close": "Close",
+    "download": "Download",
+    "all_download": "All Download",
+    "next": "Next",
+    "play_list": "Play List",
+    "history": "History",
+    "top": "Top",
+    "mini": "Mini",
+    "no_data": "No Data",
+    "clear_data": "Clear Data",
+    "delete": "Delete",
+    "from": "From",
+    "sync": "Sync",
+    "total": "Items",
+    "website": "Official Website",
+    "issues": "Issues",
+    "theme": "Theme",
+    "donate": "Donate",
+    "set_success": "Set up successfully.",
+    "delete_success": "Delete successful.",
+    "delete_failed": "Delete failed.",
+    "star_success": "Collection success.",
+    "last_video": "This is the last episode.",
+    "qr_tips": "Long click recognition.",
+    "zy_tips": "Prohibit the dissemination of illegal resources.",
+    "share_tips": "It has been copied to the clipboard. Please share it~",
+    "not_support_search": "Search is not supported on this site.",
+    "copy_success": "has been copied, Download it now",
+    "async_failed": "Synchronization successful, no updates found.",
+    "async_success": "Synchronization succeeded, update found.",
+    "no_history": "No history data."
+}

src/locales/index.js

@@ -0,0 +1,9 @@
+import en from './en.json'
+import zhCn from './zh-cn'
+
+export const defaultLocal = 'zhCn'
+
+export const languages = {
+  en: en,
+  zhCn: zhCn
+}

src/locales/zh-cn.json

@@ -0,0 +1,48 @@
+{
+    "zh": "中文",
+    "en": "英文",
+    "language": "语言",
+    "default_site": "默认源",
+    "view": "浏览",
+    "play": "播放",
+    "star": "收藏",
+    "setting": "设置",
+    "exists": "已存在",
+    "videoName": "视频名称",
+    "type": "类型",
+    "time": "时间",
+    "operate": "操作",
+    "share": "分享",
+    "detail": "详情",
+    "close": "关闭",
+    "download": "下载",
+    "all_download": "全集下载",
+    "next": "下一集",
+    "play_list": "播放列表",
+    "history": "历史记录",
+    "top": "置顶",
+    "mini": "精简模式",
+    "no_data": "无数据",
+    "clear_data": "清空数据",
+    "delete": "删除",
+    "from": "来源",
+    "sync": "同步",
+    "total": "条数据",
+    "website": "官网",
+    "issues": "内测反馈",
+    "theme": "主题",
+    "donate": "捐赠",
+    "set_success": "设置成功。",
+    "delete_success": "删除成功。",
+    "delete_failed": "删除失败。",
+    "star_success": "收藏成功。",
+    "last_video": "这已经是最后一集了。",
+    "qr_tips": "长按二维码，识别播放。",
+    "zy_tips": "『ZY Player』技术支持，严禁传播违法资源。",
+    "share_tips": "已复制到剪贴板，快去分享吧~ 严禁传播违法资源!!!",
+    "not_support_search": "这个网站不支持搜索。",
+    "copy_success": "已复制，快去下载吧。",
+    "async_failed": "同步成功, 未查询到更新。",
+    "async_success": "同步成功, 查询到更新。",
+    "no_history": "无历史记录"
+}

src/main.js

@@ -1,13 +1,26 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-// import 'modern-normalize'
-
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+import 'modern-normalize'
+import Register from './components/register'
+import VueI18n from 'vue-i18n'
+import { languages, defaultLocal } from './locales/index'
+import './lib/element/index'
+
+Vue.config.productionTip = false
+
+Register.registerComponents()
+
+Vue.use(VueI18n)
+const messages = Object.assign(languages)
+const i18n = new VueI18n({
+  locale: defaultLocal,
+  fallbackLocale: 'zhCn',
+  messages
+})
+
+new Vue({
+  store,
+  i18n,
+  render: h => h(App)
+}).$mount('#app')

src/mini/Mini.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="mini">
+    <div class="top">
+      <div class="left">
+        <span class="number" v-show="show.number">{{index + 1}} / {{length}}</span>
+        <span class="zy-svg" @click="prevEvent" v-show="show.prev">
+          <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="show.next">
+          <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">
+          <input type="number" min="5" max="100" v-model="opacity" @change="opacityChange"/>
+        </span>
+      </div>
+      <div class="right">
+        <span class="min" @click="frameClickEvent('miniMin')"></span>
+        <span class="close" @click="frameClickEvent('miniClose')"></span>
+      </div>
+    </div>
+    <div class="bottom">
+      <div id="xg"></div>
+    </div>
+  </div>
+</template>
+<script>
+import tools from '../lib/site/tools'
+import mini from '../lib/dexie/mini'
+import history from '../lib/dexie/history'
+import 'xgplayer'
+import Hls from 'xgplayer-hls.js'
+const ipc = require('electron').ipcRenderer
+export default {
+  name: 'mini',
+  data () {
+    return {
+      xg: null,
+      config: {
+        id: 'xg',
+        lang: 'zh-cn',
+        url: '',
+        fluid: true,
+        autoplay: false,
+        videoInit: true,
+        screenShot: true,
+        keyShortcut: 'on',
+        crossOrigin: true,
+        defaultPlaybackRate: 1,
+        playbackRate: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]
+      },
+      opacity: 100,
+      video: {},
+      d: {},
+      show: {
+        prev: false,
+        next: false,
+        number: false
+      },
+      index: 0,
+      length: 0
+    }
+  },
+  methods: {
+    frameClickEvent (e) {
+      ipc.send(e)
+    },
+    opacityChange (e) {
+      ipc.send('mini-opacity', this.opacity / 100)
+    },
+    getUrls () {
+      mini.find().then(res => {
+        const v = res
+        if (v.index > 0) {
+          this.show.next = true
+          this.show.number = true
+        }
+        this.video = res
+        tools.detail_get(v.site, v.detail).then(res => {
+          this.d = res
+          if (v.index >= this.d.m3u8_urls.length) {
+            this.show.next = false
+          }
+          this.index = v.index
+          this.length = this.d.m3u8_urls.length
+          const link = res.m3u8_urls[v.index]
+          const src = link.split('$')[1]
+          this.xg.src = src
+          const currentTime = v.currentTime
+          if (currentTime !== '') {
+            this.xg.play()
+            this.xg.once('playing', () => {
+              this.xg.currentTime = currentTime
+            })
+          } else {
+            this.xg.play()
+          }
+          this.onPlayVideo()
+        })
+      })
+    },
+    onPlayVideo () {
+      const h = { ...this.video }
+      history.find({ detail: h.detail }).then(res => {
+        if (res) {
+          h.id = res.id
+          history.update(res.id, h)
+        } else {
+          h.currentTime = ''
+          delete h.id
+          history.add(h)
+        }
+      })
+      this.timerEvent(h.detail)
+    },
+    timerEvent (d) {
+      this.timer = setInterval(() => {
+        history.find({ detail: d }).then(res => {
+          if (res) {
+            const h = { ...this.video }
+            h.currentTime = this.xg.currentTime
+            h.id = res.id
+            history.update(res.id, h)
+          }
+        })
+      }, 10000)
+    },
+    prevEvent () {
+      if (this.index > 0) {
+        this.index--
+        let src = this.d.m3u8_urls[this.index]
+        src = src.split('$')[1]
+        this.xg.src = src
+        this.show.next = true
+      }
+      if (this.index === 0) {
+        this.show.prev = false
+      }
+    },
+    nextEvent () {
+      if (this.index < this.d.m3u8_urls.length - 1) {
+        this.index++
+        let src = this.d.m3u8_urls[this.index]
+        src = src.split('$')[1]
+        this.xg.src = src
+        this.show.prev = true
+      }
+      if (this.index === this.d.m3u8_urls.length - 1) {
+        this.show.next = false
+      }
+    }
+  },
+  created () {
+    this.getUrls()
+  },
+  mounted () {
+    this.xg = new Hls(this.config)
+  }
+}
+</script>
+<style lang="scss">
+html,body{
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: #000;
+}
+.mini{
+  box-sizing: border-box;
+  .top{
+    -webkit-app-region: drag;
+    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: #fff;
+        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;
+      .number{
+        color: #fff;
+        margin: 0 10px;
+        font-size: 12px;
+      }
+      .opacity{
+        -webkit-app-region: no-drag;
+        margin-left: 10px;
+        input{
+          text-indent: 4px;
+          background-color: #000;
+          color: #fff;
+          border: 1px solid #aaa;
+        }
+      }
+    }
+    .right{
+      width: 80px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      span{
+        -webkit-app-region: no-drag;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        margin-right: 10px;
+        cursor: pointer;
+        opacity: 0.5;
+        &.min{
+          background-color: #ffbe2a;
+        }
+        &.close{
+          background-color: #ff5f56;
+        }
+        &: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%;
+    height: 305px;
+  }
+}
+</style>

src/mini/main.js

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

src/router.js

@@ -1,25 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Home from './views/Home.vue'
-
-Vue.use(Router)
-
-export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/search',
-      name: 'search',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/Search.vue')
-    }
-  ]
-})

src/store.js

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})

src/store/index.js

@@ -0,0 +1,68 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    view: 'Play',
+    theme: 'light',
+    site: 'zuidazy',
+    language: 'zhCn',
+    detail: {
+      show: false,
+      v: {}
+    },
+    share: {
+      show: false,
+      v: {}
+    },
+    video: {}
+  },
+  getters: {
+    getView: state => {
+      return state.view
+    },
+    getTheme: state => {
+      return state.theme
+    },
+    getSite: state => {
+      return state.site
+    },
+    getLanguage: state => {
+      return state.language
+    },
+    getDetail: state => {
+      return state.detail
+    },
+    getVideo: state => {
+      return state.video
+    },
+    getShare: state => {
+      return state.share
+    }
+  },
+  mutations: {
+    SET_VIEW: (state, payload) => {
+      state.view = payload
+    },
+    SET_THEME: (state, payload) => {
+      state.theme = payload
+    },
+    SET_SITE: (state, payload) => {
+      state.site = payload
+    },
+    SET_LANGUAGE: (state, payload) => {
+      state.language = payload
+    },
+    SET_DETAIL: (state, payload) => {
+      state.detail = payload
+    },
+    SET_VIDEO: (state, payload) => {
+      state.video = payload
+    },
+    SET_SHARE: (state, payload) => {
+      state.share = payload
+    }
+  }
+})

src/util/util.video.js

@@ -1,35 +0,0 @@
-// import Axios from "axios"
-import axios from 'axios'
-const video = {
-  url: 'http://www.666zy.com/',
-  init () {
-    console.log('init')
-    this.post(this.url, '冰雪奇缘')
-  },
-  getList () {},
-  post (url, txt) {
-    const t = encodeURI(txt)
-    const d = `wd=${t}&submit=search`
-    axios({
-      url: url,
-      method: 'post',
-      params: { m: 'vod-search' },
-      data: d
-    }).then(res => {
-      this.parser(res.data)
-    })
-  },
-  parser (txt) {
-    const parser = new DOMParser()
-    const html = parser.parseFromString(txt, 'text/html')
-    console.log(html)
-    const list = html.querySelectorAll('.xing_vb4 a')
-    console.log(list)
-    for (let i = 0; i < list.length; i++) {
-      console.log(i, list[i].innerHTML, 'innerHTML')
-      console.log(i, list[i].getAttribute('href'), 'href')
-    }
-  }
-}
-
-export default video

src/views/Home.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="home">home</div>
-</template>
-<script>
-export default {
-  name: 'home'
-}
-</script>

src/views/Search.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="search">search</div>
-</template>
-<script>
-import video from '@/util/util.video'
-export default {
-  name: 'search',
-  methods: {},
-  created () {
-    video.init()
-  }
-}
-</script>

vue.config.js

@@ -1,10 +1,17 @@
 module.exports = {
+  pages: {
+    index: 'src/main.js',
+    mini: 'src/mini/main.js'
+  },
   pluginOptions: {
     electronBuilder: {
-      chainWebpackRendererProcess: config => {
-        if (process.env.NODE_ENV === 'development') {
-          config.plugins.delete('prefetch')
-        }
+      nodeIntegration: true,
+      builderOptions: {
+        nsis: {
+          oneClick: false,
+          allowToChangeInstallationDirectory: true
+        },
+        productName: 'ZY Player'
       }
     }
   }