☺ 测试自动更新

全新版本，更多功能。

.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,27 @@
+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 release
+        shell: pwsh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

AppVeyor.yml

@@ -1,29 +0,0 @@
-version: 0.1.{build}
-
-branches:
-  only:
-    - master
-
-image: Visual Studio 2017
-platform:
-  - x64
-
-cache:
-  - node_modules
-  - '%APPDATA%\npm-cache'
-  - '%USERPROFILE%\.electron'
-  - '%USERPROFILE%\AppData\Local\Yarn\cache'
-
-init:
-  - git config --global core.autocrlf input
-
-install:
-  - ps: Install-Product node 8 x64
-  - git reset --hard HEAD
-  - yarn
-  - node --version
-
-build_script:
-  - yarn run release
-
-test: off

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Hunlongyu
+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

README.md

@@ -1,24 +1,42 @@
-# 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">
+<p>
+<p align="center">
+<img src="https://github.com/aleen42/badges/raw/master/src/visual_studio_code_flat_square.svg?sanitize=true">
+<img src="https://github.com/aleen42/badges/raw/master/src/vue_flat_square.svg?sanitize=true">
+<img src="https://github.com/aleen42/badges/raw/master/src/javascript_flat_square.svg?sanitize=true">
+<img src="https://github.com/aleen42/badges/raw/master/src/eslint_flat_square.svg?sanitize=true">
+</p>
+<p align="center">
+<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">
+<img alt="GitHub" src="https://img.shields.io/github/license/Hunlongyu/ZY-Player?style=for-the-badge">
+<img src="https://img.shields.io/github/workflow/status/Hunlongyu/ZY-Player/release-build?style=for-the-badge">
+<p>
 
-## Project setup
-```
-yarn install
-```
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+## ZY Player
 
-### Compiles and minifies for production
-```
-yarn build
-```
 
-### Lints and fixes files
-```
-yarn lint
-```
+### 新版内测
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+新版本: v0.9.x 已开发完, 现进行内测, [点击查看内测公告](https://github.com/Hunlongyu/ZY-Player/issues/24)
+
+[点击这里可以查看开发计划](https://github.com/Hunlongyu/ZY-Player/projects/3). 
+
+大家有什么新的需求建议欢迎踊跃提出[点击这里提意见](https://github.com/Hunlongyu/ZY-Player/issues/14)
+
+1. [Github -- 官方下载](https://github.com/Hunlongyu/ZY-Player/releases)
+
+2. [蓝奏云 -- 快速下载](https://www.lanzous.com/b04s6a3re) 密码:95px
+
+#### 截图: 
+![001.png](https://i.loli.net/2020/04/28/T3YZvStwNQJ5aHy.png)
+![003.png](https://i.loli.net/2020/04/28/2xYw9nIyWSZ5Rsr.png)
+![002.png](https://i.loli.net/2020/04/28/sxnY28hgFcpUrb9.png)
+
+### 重要: 
+所有资源来自网上, 该软件不参与任何制作, 上传, 储存, 下载等内容. 该软件仅供学习参考, 请于安装后24小时内删除.

babel.config.js

@@ -1,9 +1,14 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ],
-  plugins: [['import', {
-    'libraryName': 'view-design',
-    'libraryDirectory': 'src/components'
-  }]]
+  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,38 @@
+<!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>ZY Player</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 url = get('url')
+      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,7 +1,12 @@
 {
-  "name": "zy-player",
-  "version": "0.6.2",
+  "name": "zy",
+  "version": "0.9.22",
   "private": true,
+  "author": {
+    "name": "Hunlongyu",
+    "email": "hunlongyu@gmail.com"
+  },
+  "description": "ZY Player 资源播放器",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -10,36 +15,44 @@
     "dev": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
-    "publish": "electron-builder --publish onTagOrDraft",
-    "patch": "npm version patch && git push origin master && git push origin --tags",
-    "minor": "npm version minor && git push origin master && git push origin --tags",
-    "major": "npm version major && git push origin master && git push origin --tags"
+    "release": "vue-cli-service electron:build -p always"
   },
   "main": "background.js",
   "dependencies": {
-    "axios": "^0.19.0",
-    "core-js": "^2.6.5",
-    "nedb": "^1.8.0",
-    "view-design": "^4.0.2",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.3",
-    "vuex": "^3.0.1",
-    "xgplayer": "^2.4.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",
-    "babel-plugin-import": "^1.13.0",
-    "electron": "7.1.7",
-    "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>ZY Player</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,73 +1,80 @@
 <template>
-  <div id="app" :class="getTheme.color">
-    <Layout class="box">
-        <Sider class="sider" width="70"><ZYSider /></Sider>
-        <Layout>
-            <Header class="header"><ZYHeader /></Header>
-            <ZYContent class="content">
-              <router-view />
-            </ZYContent>
-        </Layout>
-    </Layout>
+  <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>
+    <transition name="slide">
+      <Detail v-if="detail.show"/>
+    </transition>
+    <transition name="slide">
+      <Share v-if="share.show"/>
+    </transition>
   </div>
 </template>
 <script>
-import { mapGetters, mapActions } from 'vuex'
-import ZYSider from '@/components/zy_sider.vue'
-import ZYHeader from '@/components/zy_header.vue'
-import ZYContent from '@/components/zy_content.vue'
-import setting from './plugin/nedb/setting'
 export default {
-  name: 'app',
+  name: 'App',
   data () {
-    return {}
+    return {
+      appTheme: 'theme-light'
+    }
   },
   computed: {
-    ...mapGetters([
-      'getTheme'
-    ])
+    view () {
+      return this.$store.getters.getView
+    },
+    detail () {
+      return this.$store.getters.getDetail
+    },
+    share () {
+      return this.$store.getters.getShare
+    },
+    theme () {
+      return this.$store.getters.getTheme
+    }
   },
-  components: {
-    ZYSider,
-    ZYHeader,
-    ZYContent
+  watch: {
+    theme () {
+      this.changeTheme()
+    }
   },
   methods: {
-    ...mapActions([
-      'changeTheme'
-    ])
-  },
-  beforeCreate () {},
-  created () {
-    setting.find({ $or: [{ theme: 'light' }, { theme: 'dark' }] }).then(e => {
-      if (e.length <= 0) {
-        setting.add({ theme: 'light' }).then(res => {
-          this.changeTheme({ id: res._id, color: res.theme })
-        })
-      } else {
-        this.changeTheme({ id: e[0]._id, color: e[0].theme })
-      }
-    })
+    changeTheme () {
+      this.appTheme = `theme-${this.theme}`
+    }
   }
 }
 </script>
 
 <style lang="scss">
-@import './assets/global/global.scss';
-@import './assets/theme/dark.scss';
-@import './assets/theme/light.scss';
-html, body, #app, .box{
+@import './assets/scss/theme.scss';
+html, body, #app{
   height: 100%;
+  border-radius: 6px;
 }
-.box{
-  .header{
-    width: 100%;
-    height: 50px;
-    padding: 0;
-  }
-  .content{
-    width: 100%;
+#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/global/global.scss

@@ -1,50 +0,0 @@
-.detail{
-  padding: 10px;
-  .detail-box{
-    border: 1px solid #ddd;
-    padding: 10px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-bottom: 10px;
-    flex-wrap: wrap;
-    .vodImg{
-      width: 200px;
-      img{
-        width: 100%;
-        height: auto;
-      }
-    }
-    .vodInfo{
-      flex: 1;
-      overflow: hidden;
-      margin-left: 20px;
-      .vodh{
-        h2{
-          display: inline-block;
-        }
-        span{
-          font-size: 12px;
-          color: #999;
-          margin-left: 10px;
-        }
-        label{
-          font-size: 20px;
-          font-weight: bold;
-          color: #f90;
-          margin-left: 20px;
-        }
-      }
-      li{
-        list-style: none;
-        font-size: 12px;
-        color: #666;
-        height: 20px;
-        overflow: hidden;
-        a{
-          pointer-events: none;
-        }
-      }
-    }
-  }
-}

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,61 @@
+: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;
+
+  // green
+  --g-c-0: #EAEF9D;
+  --g-c-1: #EAEF9D11;
+  --g-c-2: #EAEF9D22;
+  --g-c-3: #EAEF9D33;
+  --g-c-5: #EAEF9D55;
+  --g-c-8: #EAEF9D88;
+  --g-c-9: #EAEF9D99;
+  --g-fc-1: #80B155;
+  --g-fc-2: #C1D95CAA;
+  --g-fc-3: #C1D95C;
+  --g-bgc-1: #336A29;
+  --g-bgc-2: #498428;
+  --g-bsc: 0 3px 1px -2px #C1D95C33, 0 2px 2px 0 #C1D95C22, 0 1px 5px 0 #C1D95C11;
+  --g-bsc-2: 0 -4px 23px 0 #C1D95C33;
+  --g-bsc-hover: 0 14px 26px -12px #C1D95C33, 0 4px 23px 0 #C1D95C22, 0 8px 10px -5px #C1D95C11;
+  --g-bsc-scroll: inset 0 0 5px #C1D95C05;
+}
+
+@import './theme/light.scss';
+@import './theme/dark.scss';
+@import './theme/green.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/green.scss

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

@@ -1,7 +0,0 @@
-.dark{
-  .sider,.header,.content{
-    background-color: #000;
-    color: #eee;
-    border: 1px solid #ccc;
-  }
-}

src/assets/theme/light.scss

@@ -1,56 +0,0 @@
-.light{
-  .sider,.header,.content{
-    background-color: #fff;
-    color: #515a6e;
-  }
-  .sider{
-    .sider-box{
-      color: #808695;
-      i{
-        &:hover{
-          color: #515a6e;
-          background-color: #efefef;
-        }
-        &.active{
-          color: #515a6e;
-          background-color: #efefef;
-          border-left: 4px solid #515a6e;
-        }
-      }
-    }
-  }
-  .header{
-    .header-box{
-      color: #808695;
-      i{
-        &:hover{
-          color: #515a6e;
-          background-color: #efefef;
-          border-bottom: 1px solid #808695;
-        }
-      }
-    }
-  }
-  .content{
-    border: 1px solid #dcdee2;
-  }
-  .search{
-    .search-middle{
-      .ivu-table-cell{
-        button{
-          margin: 0 4px;
-        }
-      }
-    }
-    .search-bottom{
-      border-top: 1px solid #f0f0f0;
-    }
-  }
-  .collection{
-    .ivu-table-cell{
-      button{
-        margin: 0 4px;
-      }
-    }
-  }
-}

src/background.js

@@ -1,40 +1,43 @@
 'use strict'
 
-import { app, protocol, ipcMain, 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: 1080,
     height: 720,
     frame: false,
+    resizable: false,
+    transparent: true,
     webPreferences: {
       webSecurity: false,
-      nodeIntegration: true
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
     },
-    icon: `${__static}/app.ico`
+    // 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', () => {
@@ -42,49 +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()
   }
-})
-
-ipcMain.on('min', e => win.minimize())
-ipcMain.on('max', e => {
-  if (win.isMaximized()) {
-    win.unmaximize()
-  } else {
-    win.maximize()
+  if (mini === null) {
+    createMini()
   }
 })
-ipcMain.on('close', e => win.close())
 
-// 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.
+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)
+})
+
 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,333 @@
+<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 && keywords.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 && keywords.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.tag = 0
+      this.id = e.tags[0].id
+      this.show.site = false
+      if (this.keywords.length > 0) {
+        this.searchEvent()
+      } else {
+        this.tb.update = 0
+        this.tb.total = 0
+        this.tb.loading = true
+        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/Play.vue

@@ -0,0 +1,513 @@
+<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.currentTime = 0
+            this.video.index++
+          }
+          this.xg.off('ended')
+        })
+      }).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,246 @@
+<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 @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">{{$t('website')}}</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">{{$t('issues')}} v{{pkg.version}}</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 @click="changeTheme('green')" class="theme-item green">
+            <div class="theme-image">
+              <img src="../assets/image/green.png" alt="">
+            </div>
+            <div class="theme-name">Green</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'
+import { shell } from 'electron'
+import pkg from '../../package.json'
+export default {
+  name: 'setting',
+  data () {
+    return {
+      pkg: pkg,
+      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']),
+    linkOpen (e) {
+      shell.openExternal(e)
+    },
+    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;
+      cursor: pointer;
+    }
+  }
+  .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/components/zy_content.vue

@@ -1,13 +0,0 @@
-<template>
-  <router-view />
-</template>
-<script>
-export default {
-  name: 'zy_content',
-  methods: {
-    switchTheme (e) {
-      this.theme = e
-    }
-  }
-}
-</script>

src/components/zy_header.vue

@@ -1,39 +0,0 @@
-<template>
-  <Row class="header-box">
-    <Icon type="md-remove" @click="clickFrameEvent('min')" />
-    <Icon type="md-add" @click="clickFrameEvent('max')" />
-    <Icon type="md-close" @click="clickFrameEvent('close')" />
-  </Row>
-</template>
-<script>
-const { ipcRenderer: ipc } = require('electron')
-export default {
-  name: 'zy_header',
-  methods: {
-    clickFrameEvent (e) {
-      ipc.send(e)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.header-box{
-  position: absolute;
-  top: 0;
-  left: 70px;
-  width: calc(100% - 70px);
-  height: 50px;
-  -webkit-app-region: drag;
-  -webkit-user-select: none;
-  display: flex;
-  justify-content: flex-end;
-  i{
-    font-size: 20px;
-    width:50px;
-    height:50px;
-    line-height:50px;
-    cursor: pointer;
-    -webkit-app-region: no-drag;
-  }
-}
-</style>

src/components/zy_sider.vue

@@ -1,52 +0,0 @@
-<template>
-  <Row class="sider-box">
-    <div class="top">
-      <Icon title="搜索" :class="iconActive === 'search' ? 'active': ''" type="md-search" @click="iconClickEvent('search')"/>
-      <Icon title="详情" v-show="Object.keys(video).length !== 0" :class="iconActive === 'detail' ? 'active': ''" type="md-list" @click="iconClickEvent('detail')"/>
-      <Icon title="播放" v-show="Object.keys(video).length !== 0" :class="iconActive === 'play' ? 'active': ''" type="md-play" @click="iconClickEvent('play')"/>
-      <Icon title="收藏" :class="iconActive === 'collection' ? 'active': ''" type="md-star" @click="iconClickEvent('collection')"/>
-    </div>
-    <div class="bottom">
-      <Icon title="设置" :class="iconActive === 'settings' ? 'active': ''" type="md-settings" @click="iconClickEvent('settings')"/>
-    </div>
-  </Row>
-</template>
-<script>
-export default {
-  name: 'zy-sider',
-  computed: {
-    iconActive () {
-      return this.$store.getters.getIconActive
-    },
-    video () {
-      return this.$store.getters.getVideo
-    }
-  },
-  methods: {
-    iconClickEvent (e) {
-      this.$router.push({ name: e })
-      this.$store.commit('SET_ICON_ACTIVE', e)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.sider-box{
-  height: 100%;
-  position: relative;
-  -webkit-app-region: drag;
-  -webkit-user-select: none;
-  .bottom{
-    position: absolute;
-    bottom: 0;
-  }
-  i{
-    -webkit-app-region: no-drag;
-    font-size: 32px;
-    width: 70px;
-    height: 70px;
-    line-height: 70px;
-    cursor: pointer;
-  }
-}
-</style>

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 = 0, 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/lib/sites.js

@@ -1,29 +0,0 @@
-const sites = [
-  {
-    id: 'okzy',
-    name: 'OK资源网',
-    url: 'https://www.okzy.co'
-  },
-  {
-    id: 'zuidazy',
-    name: '最大资源网',
-    url: 'http://www.zuidazy1.com'
-  },
-  {
-    id: 'subo',
-    name: '速播资源站',
-    url: 'https://www.subo988.com'
-  },
-  {
-    id: 'zuixinzy',
-    name: '最新资源网',
-    url: 'http://www.zuixinzy.cc'
-  },
-  {
-    id: '123ku',
-    name: '123资源网',
-    url: 'https://www.123ku.com'
-  }
-]
-
-export default sites

src/lib/util.zy.js

@@ -1,94 +0,0 @@
-import axios from 'axios'
-import sites from './sites'
-const zy = {
-  num: 0,
-  page: 1,
-  key: '',
-  site: {},
-  list: [],
-  getInfoRequire () {
-    return new Promise((resolve, reject) => {
-      const key = encodeURI(this.key)
-      const params = `${this.site.url}/index.php?m=vod-search-pg-${this.page}-wd-${key}.html`
-      axios.get(params).then(res => {
-        this.getInfoHtml(res.data).then(res => {
-          resolve(res)
-        })
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  getInfoHtml (txt) {
-    return new Promise((resolve, reject) => {
-      const parser = new DOMParser()
-      const html = parser.parseFromString(txt, 'text/html')
-      const list = html.querySelectorAll('.xing_vb li')
-      let d = {
-        list: [],
-        num: 0
-      }
-      for (let i = 1; i < list.length - 1; i++) {
-        let info = {
-          name: list[i].childNodes[1].innerText,
-          detail: this.site.url + list[i].childNodes[1].childNodes[0].getAttribute('href'),
-          category: list[i].childNodes[3].innerText,
-          time: list[i].childNodes[5].innerText,
-          index: 0,
-          urls: [],
-          check: false
-        }
-        d.list.push(info)
-      }
-      let num = html.querySelectorAll('.nvc dd span')[1].innerText
-      num = parseInt(num)
-      d.num = num
-      resolve(d)
-    })
-  },
-  info (n = 0, p = 1, k = null) {
-    return new Promise((resolve, reject) => {
-      this.page = p
-      this.key = k
-      this.num = n
-      this.site = sites[this.num]
-      this.getInfoRequire().then(res => {
-        resolve(res)
-      })
-    })
-  },
-  detail (url) {
-    return new Promise((resolve, reject) => {
-      axios.get(url).then(res => {
-        resolve(this.getDetailUrls(res.data))
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  getDetailUrls (txt) {
-    return new Promise((resolve, reject) => {
-      const parser = new DOMParser()
-      let html = parser.parseFromString(txt, 'text/html')
-      let data = {
-        box: null,
-        info: null,
-        urls: []
-      }
-      data.box = html.querySelector('.vodBox').innerHTML
-      data.info = html.querySelector('.vodplayinfo').innerHTML
-      let urls = html.querySelectorAll('.vodplayinfo li')
-      let arr = []
-      for (let i in urls) {
-        let j = urls[i].innerText
-        if (j !== undefined && j.indexOf('.m3u8') !== -1) {
-          arr.push(urls[i].innerText)
-        }
-      }
-      data.urls = arr
-      resolve(data)
-    })
-  }
-}
-
-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 '@/plugin/iview/'
-
-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/plugin/iview/index.js

@@ -1,27 +0,0 @@
-import Vue from 'vue'
-import 'view-design/dist/styles/iview.css'
-import {
-  Layout, Sider, Header, Content, Row, Col,
-  Icon, Button, Input, Select, Option, Table,
-  Message, Notice, Page
-} from 'view-design'
-
-Vue.component('Layout', Layout)
-Vue.component('Sider', Sider)
-Vue.component('Header', Header)
-Vue.component('Content', Content)
-Vue.component('Row', Row)
-Vue.component('Col', Col)
-Vue.component('Icon', Icon)
-Vue.component('Button', Button)
-Vue.component('Input', Input)
-Vue.component('Select', Select)
-Vue.component('Option', Option)
-Vue.component('Table', Table)
-Vue.component('Page', Page)
-
-Vue.prototype.$Message = Message
-Vue.prototype.$Notice = Notice
-Vue.prototype.$Notice.config({
-  top: 60
-})

src/plugin/nedb/index.js

@@ -1,36 +0,0 @@
-import Nedb from 'nedb'
-
-export default class {
-  constructor () {
-    this.db = null
-  }
-
-  create (db) {
-    const name = process.env.NODE_ENV === 'development' ? 'ZY-dev' : 'ZY'
-    const database = {}
-
-    database.setting = new Nedb({
-      filename: name + db.setting,
-      autoload: true
-    })
-    database.video = new Nedb({
-      filename: name + db.video,
-      autoload: true
-    })
-
-    return database
-  }
-
-  init () {
-    if (this.db) {
-      return this.db
-    }
-
-    this.db = this.create({
-      setting: '-setting',
-      video: '-video'
-    })
-
-    return this.db
-  }
-}

src/plugin/nedb/setting.js

@@ -1,32 +0,0 @@
-import DB from './index'
-
-const db = new DB()
-const connect = db.init()
-const setting = connect.setting
-
-export default {
-  add (data) {
-    return new Promise((resolve, reject) => {
-      setting.insert(data, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  },
-  find (data) {
-    return new Promise((resolve, reject) => {
-      setting.find(data, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  },
-  update (id, data) {
-    return new Promise((resolve, reject) => {
-      setting.update({ _id: id }, { $set: data }, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  }
-}

src/plugin/nedb/video.js

@@ -1,49 +0,0 @@
-// import DB from './index'
-import DB from './index'
-
-const db = new DB()
-const connect = db.init()
-const video = connect.video
-
-export default {
-  add (data) {
-    return new Promise((resolve, reject) => {
-      video.insert(data, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  },
-  find (data) {
-    return new Promise((resolve, reject) => {
-      video.find(data, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  },
-  update (id, data) {
-    return new Promise((resolve, reject) => {
-      video.find({ _id: id }, { $set: data }, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  },
-  remove (id) {
-    return new Promise((resolve, reject) => {
-      video.remove({ _id: id }, {}, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  },
-  removeAll () {
-    return new Promise((resolve, reject) => {
-      video.remove({}, { multi: true }, (err, docs) => {
-        if (err) { reject(err) }
-        resolve(docs)
-      })
-    })
-  }
-}

src/router.js

@@ -1,37 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Search from './views/Search.vue'
-
-Vue.use(Router)
-
-export default new Router({
-  // mode: 'history',
-  // base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: 'search',
-      component: Search
-    },
-    {
-      path: '/detail',
-      name: 'detail',
-      component: () => import(/* webpackChunkName: "about" */ './views/Detail.vue')
-    },
-    {
-      path: '/settings',
-      name: 'settings',
-      component: () => import(/* webpackChunkName: "about" */ './views/Settings.vue')
-    },
-    {
-      path: '/play',
-      name: 'play',
-      component: () => import(/* webpackChunkName: "about" */ './views/Player.vue')
-    },
-    {
-      path: '/collection',
-      name: 'collection',
-      component: () => import(/* webpackChunkName: "about" */ './views/Collection.vue')
-    }
-  ]
-})

src/store.js

@@ -1,57 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import setting from '@/plugin/nedb/setting'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-    site: 0,
-    theme: {
-      id: '',
-      color: 'light'
-    },
-    iconActive: 'search',
-    video: {}
-  },
-  getters: {
-    getSite: state => {
-      return state.site
-    },
-    getTheme: state => {
-      return state.theme
-    },
-    getIconActive: state => {
-      return state.iconActive
-    },
-    getVideo: state => {
-      return state.video
-    }
-  },
-  mutations: {
-    SET_SITE: (state, payload) => {
-      state.site = payload
-    },
-    SET_THEME: (state, payload) => {
-      state.theme = payload
-    },
-    SET_ICON_ACTIVE: (state, payload) => {
-      state.iconActive = payload
-    },
-    SET_VIDEO: (state, payload) => {
-      state.video = payload
-    }
-  },
-  actions: {
-    changeTheme: ({ commit }, payload) => {
-      setting.update(payload.id, { theme: payload.color }).then(res => {
-        commit('SET_THEME', payload)
-      })
-    },
-    changeSite: ({ commit }, payload) => {
-      setting.update(payload.id, { site: payload.site }).then(res => {
-        commit('SET_SITE', payload)
-      })
-    }
-  }
-})

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: 'Film',
+    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/views/Collection.vue

@@ -1,90 +0,0 @@
-<template>
-  <Row class="collection">
-    <div class="collectionBox">
-      <Table stripe :columns="columns" :data="data" :loading="loading">
-        <template slot-scope="{ row }" slot="action" >
-          <Button size="small" @click="play(row)">Play</Button>
-          <Button size="small" type="info" ghost @click="detailShow(row)">Detail</Button>
-          <Button size="small" type="error" ghost @click="deleteLi(row)">Delete</Button>
-        </template>
-      </Table>
-    </div>
-  </Row>
-</template>
-<script>
-import db from '@/plugin/nedb/video'
-export default {
-  name: 'collection',
-  data () {
-    return {
-      columns: [
-        {
-          title: 'Name',
-          key: 'name',
-          sortable: true
-        },
-        {
-          title: 'Category',
-          key: 'category',
-          width: 120,
-          align: 'center'
-        },
-        {
-          title: 'Time',
-          key: 'time',
-          width: 180,
-          align: 'center'
-        },
-        {
-          title: 'Action',
-          slot: 'action',
-          align: 'center',
-          width: 260
-        }
-      ],
-      data: [],
-      loading: false,
-      detail: false
-    }
-  },
-  methods: {
-    getList () {
-      db.find().then(res => {
-        this.data = res
-      })
-    },
-    play (e) {
-      this.$router.push({ name: 'play' })
-      this.$store.commit('SET_ICON_ACTIVE', 'play')
-      this.$store.commit('SET_VIDEO', e)
-    },
-    detailShow (e) {
-      this.$store.commit('SET_ICON_ACTIVE', 'detail')
-      this.$store.commit('SET_VIDEO', e)
-      this.$router.push({ name: 'detail' })
-    },
-    deleteLi (e) {
-      db.remove(e._id).then(res => {
-        this.getList()
-      })
-    }
-  },
-  created () {
-    this.getList()
-  }
-}
-</script>
-<style lang="scss" scoped>
-.collection{
-  height: 100%;
-  position: relative;
-  .collectionBox{
-    position: absolute;
-    width: 100%;
-    top: 0px;
-    height: 100%;
-    overflow: scroll;
-    &::-webkit-scrollbar { display: none }
-  }
-}
-</style>

src/views/Detail.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="detail">
-    <div v-show="box" class="detail-box" v-html="data.box"></div>
-    <div v-show="box" class="detail-box" v-html="data.info"></div>
-    <div v-show="box" class="detail-box">
-      <Button v-for="(i, j) in data.urls" :key="j" @click="playBtn(i, j, video)">{{i | ftLink}}</Button>
-    </div>
-  </div>
-</template>
-<script>
-import zy from '@/lib/util.zy'
-import { mapMutations } from 'vuex'
-export default {
-  name: 'detail',
-  data () {
-    return {
-      data: {
-        box: null,
-        info: null,
-        m3u8: null
-      },
-      box: false
-    }
-  },
-  filters: {
-    ftLink (e) {
-      let name = e.split('$')[0]
-      return name
-    }
-  },
-  computed: {
-    video () {
-      return this.$store.getters.getVideo
-    }
-  },
-  methods: {
-    ...mapMutations([
-      'SET_VIDEO'
-    ]),
-    async getDetail () {
-      this.box = false
-      let url = this.video.detail
-      this.data = await zy.detail(url)
-      this.video.urls = this.data.urls
-      this.video.check = true
-      this.box = true
-    },
-    playBtn (i, j, e) {
-      this.video.index = j
-      this.$store.commit('SET_VIDEO', this.video)
-      this.$router.push({ name: 'play' })
-      this.$store.commit('SET_ICON_ACTIVE', 'play')
-    }
-  },
-  created () {
-    this.getDetail()
-  }
-}
-</script>
-<style lang="scss" scoped>
-.detail{
-  .btns{
-    margin-bottom: 10px;
-  }
-  .detail-box{
-    button{
-      margin: 4px;
-    }
-  }
-}
-</style>

src/views/Player.vue

@@ -1,121 +0,0 @@
-<template>
-  <Row class="player">
-    <div class="title">{{ video.name }} -- {{ info }}</div>
-    <div class="playerBox">
-      <div id="xg"></div>
-    </div>
-    <div class="list">
-      <Button v-for="(i, j) in video.urls" :key="j" @click="playBtn(i, j, video)">{{i | ftLink}}</Button>
-    </div>
-  </Row>
-</template>
-<script>
-import 'xgplayer'
-import Hls from 'xgplayer-hls.js'
-import zy from '@/lib/util.zy'
-// import haku from '@/lib/util.666zy'
-export default {
-  name: 'player',
-  data () {
-    return {
-      data: {},
-      url: null,
-      xg: null,
-      info: '',
-      config: {
-        id: 'xg',
-        url: null,
-        fluid: true,
-        autoplay: true,
-        keyShortcut: 'on',
-        defaultPlaybackRate: 1,
-        playbackRate: [0.5, 0.75, 1, 1.5, 2]
-      }
-    }
-  },
-  filters: {
-    ftLink (e) {
-      let name = e.split('$')[0]
-      return name
-    }
-  },
-  computed: {
-    video () {
-      return this.$store.getters.getVideo
-    }
-  },
-  methods: {
-    init () {
-      if (this.video.check) {
-        let url = this.video.urls[this.video.index].split('$')[1]
-        this.info = this.video.urls[this.video.index].split('$')[0]
-        this.$nextTick(() => {
-          this.playEvent(url)
-        })
-      } else {
-        this.getDetail()
-      }
-    },
-    async getDetail () {
-      let d = this.video.detail
-      let index = this.video.index
-      this.data = await zy.detail(d)
-      let urls = this.data.urls
-      this.video.urls = urls
-      this.video.check = true
-      let playUrl = urls[index].split('$')[1]
-      this.info = urls[index].split('$')[0]
-      this.$nextTick(() => {
-        this.playEvent(playUrl)
-      })
-    },
-    playEvent (e) {
-      this.config.url = e
-      this.xg = new Hls(this.config)
-    },
-    playBtn (i, j, e) {
-      this.video.index = j
-      let url = this.video.urls[this.video.index].split('$')[1]
-      this.info = this.video.urls[this.video.index].split('$')[0]
-      this.xg.src = url
-    }
-  },
-  created () {
-    this.init()
-  },
-  destroyed () {
-    this.xg.destroy()
-  }
-}
-</script>
-<style lang="scss" scoped>
-.player{
-  padding: 10px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  .title{
-    margin-bottom: 8px;
-    font-size: 18px;
-    text-align: left;
-    width: 800px;
-  }
-  .playerBox{
-    width: 100%;
-    max-width: 800px;
-    border: 1px solid #000;
-  }
-  .list{
-    margin-top: 10px;
-    width: 800px;
-    text-align: left;
-    button{
-      margin-right: 10px;
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>

src/views/Search.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="search">
-    <div :class="active ? 'search-top haveList': 'search-top'" >
-      <Input class="search-input" v-model.trim="txt" size="large" search placeholder="输入需要搜索的资源名称..." @on-search="searchEvent" clearable @on-clear="searchClear">
-        <Select slot="prepend" v-model="site" style="width: 120px;">
-          <Option v-for="(i, j) in sites" :key="j" :value="j">{{i.name}}</Option>
-        </Select>
-        <!-- eslint-disable-next-line -->
-      </Input>
-    </div>
-    <div class="search-middle" v-if="active">
-      <Table stripe :columns="columns" :data="data" :loading="loading">
-        <template slot-scope="{ row }" slot="action" >
-          <Button size="small" @click="play(row)">Play</Button>
-          <Button size="small" @click="collection(row)">Star</Button>
-          <Button size="small" @click="detail(row)">Detail</Button>
-        </template>
-      </Table>
-    </div>
-    <div class="search-bottom" v-if="active">
-      <Page :total="num" :current.sync="page" :page-size="50" show-total @on-change="onChange" />
-    </div>
-  </div>
-</template>
-<script>
-import db from '@/plugin/nedb/video'
-import zy from '@/lib/util.zy'
-import sites from '@/lib/sites'
-import { mapGetters, mapMutations } from 'vuex'
-export default {
-  name: 'search',
-  data () {
-    return {
-      sites: sites,
-      txt: '',
-      active: false,
-      columns: [
-        {
-          title: 'Name',
-          key: 'name',
-          minWidth: 240
-        },
-        {
-          title: 'Category',
-          key: 'category',
-          width: 100,
-          align: 'center'
-        },
-        {
-          title: 'Time',
-          key: 'time',
-          width: 110,
-          align: 'center'
-        },
-        {
-          title: 'Action',
-          slot: 'action',
-          align: 'center',
-          width: 260
-        }
-      ],
-      data: [],
-      page: 1,
-      num: 0,
-      loading: true
-    }
-  },
-  computed: {
-    ...mapGetters(['getVideo']),
-    ...mapGetters({
-      getSite: 'getSite'
-    }),
-    site: {
-      get () {
-        return this.getSite
-      },
-      set (val) {
-        this.SET_SITE(val)
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_SITE']),
-    async searchEvent () {
-      if (this.txt !== '') {
-        this.active = true
-        this.loading = true
-        this.page = 1
-        let z = await zy.info(this.site, this.page, this.txt)
-        this.data = z.list
-        this.num = z.num
-        this.loading = false
-      }
-    },
-    searchClear () {
-      this.txt = ''
-      this.active = false
-      this.loading = true
-    },
-    async onChange () {
-      let z = await zy.info(this.site, this.page, this.txt)
-      this.data = z.list
-      this.num = z.num
-    },
-    play (e) {
-      if (this.getVideo.detail !== e.detail) {
-        this.$store.commit('SET_VIDEO', e)
-      }
-      this.$store.commit('SET_ICON_ACTIVE', 'play')
-      this.$router.push({ name: 'play' })
-    },
-    async collection (e) {
-      let d = await zy.detail(e.detail)
-      let data = {
-        category: e.category,
-        detail: e.detail,
-        name: e.name,
-        time: e.time,
-        type: 'single',
-        index: 0,
-        urls: [],
-        check: false
-      }
-      data.urls = d.urls
-      data.check = true
-      this.$store.commit('SET_VIDEO', data)
-      db.find({ detail: data.detail }).then(res => {
-        if (res.length >= 1) {
-          this.$Notice.warning({
-            title: '资源已存在',
-            backgroud: true
-          })
-        } else {
-          db.add(data).then(res => {
-            this.$Notice.success({
-              title: '收藏成功',
-              backgroud: true
-            })
-          })
-        }
-      })
-    },
-    detail (e) {
-      this.$store.commit('SET_VIDEO', e)
-      this.$store.commit('SET_ICON_ACTIVE', 'detail')
-      this.$router.push({ name: 'detail' })
-    }
-  },
-  created () {
-    // this.sites = sites
-  }
-}
-</script>
-<style lang="scss" scoped>
-.search{
-  height: 100%;
-  position: relative;
-  .search-top{
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 60px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    animation: slideDown 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    .search-input{
-      width: 80%;
-    }
-    &.haveList{
-      animation: slideUp 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    }
-    @keyframes slideUp {
-      from {
-        height: 100%;
-      }
-      to{
-        height: 60px;
-      }
-    }
-    @keyframes slideDown {
-      from {
-        height: 60px;
-      }
-      to{
-        height: 100%;
-      }
-    }
-  }
-  .search-middle{
-    position: absolute;
-    top: 60px;
-    width: 100%;
-    height: calc(100% - 120px);
-    padding: 10px;
-    overflow: scroll;
-    &::-webkit-scrollbar { display: none }
-    animation: fade-in 1.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
-  }
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  .search-bottom{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    padding: 0 10px;
-  }
-}
-</style>

src/views/Settings.vue

@@ -1,62 +0,0 @@
-<template>
-  <Row class="setting">
-    <div class="item about">
-      <div class="title">关于:</div>
-      <ul>
-        <li>作者: <a href="https://github.com/Hunlongyu">Hunlongyu</a></li>
-        <li>官网: <a href="https://zy_player.hunlongyu.fun">ZY Player</a></li>
-        <li>反馈: <a href="https://github.com/Hunlongyu/ZY-Player/issues">Issues</a></li>
-      </ul>
-    </div>
-    <div class="item upgrade">
-      <div class="title">更新:</div>
-      <div class="btns">版本: v0.6.2</div>
-      <div class="btns"><Button @click="checkUpgrade">检查更新</Button></div>
-    </div>
-    <div class="item theme">
-      <div class="title">主题:</div>
-      <div class="btns">
-        <Button @click="changeTheme({ id: getTheme.id, color: 'light' })">light</Button>
-        <Button @click="changeTheme({ id: getTheme.id, color: 'dark' })">Dark</Button>
-      </div>
-    </div>
-  </Row>
-</template>
-<script>
-import { mapGetters, mapActions } from 'vuex'
-export default {
-  name: 'settings',
-  computed: {
-    ...mapGetters([
-      'getTheme'
-    ])
-  },
-  methods: {
-    ...mapActions([
-      'changeTheme'
-    ]),
-    checkUpgrade () {}
-  }
-}
-</script>
-<style lang="scss" scoped>
-.setting{
-  padding: 10px;
-  .item{
-    margin-bottom: 10px;
-    .title{
-      font-size: 16px;
-    }
-    ul{
-      margin-left: 10px;
-      list-style: none;
-    }
-    .btns{
-      margin-left: 10px;
-      button{
-        margin-right: 10px;
-      }
-    }
-  }
-}
-</style>

vue.config.js

@@ -1,18 +1,43 @@
 module.exports = {
+  pages: {
+    index: 'src/main.js',
+    mini: 'src/mini/main.js'
+  },
   pluginOptions: {
     electronBuilder: {
+      nodeIntegration: true,
       builderOptions: {
-        win: {
-          icon: './public/app.ico'
+        nsis: {
+          oneClick: false,
+          allowToChangeInstallationDirectory: true
         },
+        appId: 'com.hunlongyu.zy',
+        copyright: 'Copyright @ 2020 Hunlongyu',
+        productName: 'ZY Player 内测版',
+        publish: [
+          {
+            provider: 'github',
+            owner: 'Hunlongyu',
+            repo: 'ZY-Player'
+          }
+        ],
         mac: {
-          icon: './public/app.png'
+          icon: 'build/icon/icon.icns',
+          category: 'public.app-category.developer-tools',
+          target: 'default',
+          extendInfo: {
+            LSUIElement: 1
+          }
         },
-        productName: 'ZY Player'
-      },
-      chainWebpackRendererProcess: config => {
-        if (process.env.NODE_ENV === 'development') {
-          config.plugins.delete('prefetch')
+        win: {
+          icon: 'build/icons/icon.ico',
+          target: 'nsis'
+        },
+        linux: {
+          icon: 'build/icons/'
+        },
+        snap: {
+          publish: ['github']
         }
       }
     }