🎏 IPTV

This reverts commit 8b78aafda4.

# Conflicts:
#	src/components/IPTV.vue

.eslintrc.js

@@ -13,5 +13,16 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
 }

.github/workflows/release.yml

@@ -21,19 +21,7 @@ jobs:
 
       - run: |
           yarn
-          yarn electron:build
+          yarn release
         shell: pwsh
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: |
-            dist_electron/*.exe
-            dist_electron/win-unpacked/*.exe
-            dist_electron/*.dmg
-            dist_electron/*.snap
-            dist_electron/*.yml
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/x86.yml

@@ -0,0 +1,35 @@
+name: release-build
+
+on:
+  push:
+    tags:
+      - x86-v*
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [windows-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - run: |
+          yarn
+          yarn dist
+        shell: pwsh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist_electron
+          path: dist_electron/*.exe
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+
 # local env files
 .env.local
 .env.*.local
@@ -10,6 +11,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

README.md

@@ -1,42 +1,29 @@
-<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>
+# zy
 
+## Project setup
+```
+yarn install
+```
 
-## ZY Player
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
 
+### Compiles and minifies for production
+```
+yarn build
+```
 
-### 新版内测
+### Run your unit tests
+```
+yarn test:unit
+```
 
-新版本: v0.9.x 已开发完, 现进行内测, [点击查看内测公告](https://github.com/Hunlongyu/ZY-Player/issues/24)
+### Lints and fixes files
+```
+yarn lint
+```
 
-[点击这里可以查看开发计划](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小时内删除.
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

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

docs/CNAME

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

docs/index.html

@@ -1,11 +0,0 @@
-<!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

@@ -1,38 +0,0 @@
-<!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,10 +1,11 @@
 {
-  "name": "zyplayer",
-  "version": "0.9.18",
+  "name": "zy",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "electron:build": "vue-cli-service electron:build",
     "dev": "vue-cli-service electron:serve",
@@ -13,40 +14,35 @@
   },
   "main": "background.js",
   "dependencies": {
-    "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",
+    "chai-as-promised": "^7.1.1",
+    "core-js": "^3.6.5",
+    "modern-normalize": "^1.0.0",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.17.0",
-    "vuex": "^3.1.3",
-    "xgplayer": "^2.6.14",
-    "xgplayer-hls.js": "^2.1.6"
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@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/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-mocha": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-component": "^1.1.1",
-    "electron": "^8.2.1",
+    "chai": "^4.1.2",
+    "electron": "^10.1.3",
+    "electron-devtools-installer": "^3.1.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": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-electron-builder": "2.0.0-beta.6",
-    "vue-template-compiler": "^2.6.11"
+    "spectron": "^12.0.0",
+    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
+    "vue-svg-loader": "^0.16.0",
+    "vue-template-compiler": "^2.6.12"
   }
 }

public/index.html

@@ -4,17 +4,8 @@
     <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 %>icon.png">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <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>

src/App.vue

@@ -1,51 +1,20 @@
 <template>
-  <div id="app" :class="appTheme">
-    <Aside />
-    <div class="zy-body">
-      <Frame />
+  <div id="app" class="theme-light">
+    <Frame />
+    <div class="main">
+      <Aside />
       <Film v-show="view === 'Film'" />
-      <Play v-show="view === 'Play'" />
-      <Star v-show="view === 'Star'" />
-      <Setting v-show="view === 'Setting'" />
+      <IPTV v-show="view === 'IPTV'" />
     </div>
-    <transition name="slide">
-      <Detail v-if="detail.show"/>
-    </transition>
-    <transition name="slide">
-      <Share v-if="share.show"/>
-    </transition>
   </div>
 </template>
+
 <script>
 export default {
   name: 'App',
   data () {
     return {
-      appTheme: 'theme-light'
-    }
-  },
-  computed: {
-    view () {
-      return this.$store.getters.getView
-    },
-    detail () {
-      return this.$store.getters.getDetail
-    },
-    share () {
-      return this.$store.getters.getShare
-    },
-    theme () {
-      return this.$store.getters.getTheme
-    }
-  },
-  watch: {
-    theme () {
-      this.changeTheme()
-    }
-  },
-  methods: {
-    changeTheme () {
-      this.appTheme = `theme-${this.theme}`
+      view: 'IPTV'
     }
   }
 }
@@ -55,26 +24,15 @@ export default {
 @import './assets/scss/theme.scss';
 html, body, #app{
   height: 100%;
-  border-radius: 6px;
+  overflow: hidden;
 }
-#app {
+#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%;
+  .main{
     display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 0 20px 20px;
+    height: calc(100% - 50px);
   }
 }
 </style>

src/assets/img/css.gg/bell.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14 3V3.28988C16.8915 4.15043 19 6.82898 19 10V17H20V19H4V17H5V10C5 6.82898 7.10851 4.15043 10 3.28988V3C10 1.89543 10.8954 1 12 1C13.1046 1 14 1.89543 14 3ZM7 17H17V10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V17ZM14 21V20H10V21C10 22.1046 10.8954 23 12 23C13.1046 23 14 22.1046 14 21Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/cloud.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.738 19.9964C14.8186 19.9988 14.8994 20 14.9806 20C19.3989 20 22.9806 16.4183 22.9806 12C22.9806 7.58172 19.3989 4 14.9806 4C12.4542 4 10.2013 5.17108 8.73522 7H7.51941C3.92956 7 1.01941 9.91015 1.01941 13.5C1.01941 17.0899 3.92956 20 7.51941 20H14.5194C14.5926 20 14.6654 19.9988 14.738 19.9964ZM16.6913 17.721C19.0415 16.9522 20.9806 14.6815 20.9806 12C20.9806 8.68629 18.2943 6 14.9806 6C11.6669 6 8.98059 8.68629 8.98059 12H6.98059C6.98059 10.9391 7.1871 9.92643 7.56211 9H7.51941C5.03413 9 3.01941 11.0147 3.01941 13.5C3.01941 15.9853 5.03413 18 7.51941 18H14.5194C15.0691 18 15.9041 17.9014 16.6913 17.721Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/components.svg

@@ -0,0 +1,32 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.7572 6.3431L11.9998 2.10046L16.2425 6.3431L11.9998 10.5857L7.7572 6.3431ZM10.5856 6.3431L11.9998 4.92889L13.4141 6.3431L11.9998 7.75732L10.5856 6.3431Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.10046 11.9999L6.3431 7.75726L10.5857 11.9999L6.3431 16.2425L2.10046 11.9999ZM4.92889 11.9999L6.3431 10.5857L7.75732 11.9999L6.3431 13.4141L4.92889 11.9999Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.4142 11.9999L17.6568 16.2425L21.8995 11.9999L17.6568 7.75726L13.4142 11.9999ZM17.6568 10.5857L16.2426 11.9999L17.6568 13.4141L19.071 11.9999L17.6568 10.5857Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.7572 17.6569L11.9998 13.4142L16.2425 17.6569L11.9998 21.8995L7.7572 17.6569ZM10.5856 17.6569L11.9998 16.2427L13.4141 17.6569L11.9998 19.0711L10.5856 17.6569Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/edit-unmask.svg

@@ -0,0 +1,28 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5Z"
+    fill="currentColor"
+  />
+  <path
+    d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
+    fill="currentColor"
+  />
+  <path
+    d="M12 22C13.6569 22 15 20.6569 15 19C15 17.3431 13.6569 16 12 16C10.3431 16 9 17.3431 9 19C9 20.6569 10.3431 22 12 22Z"
+    fill="currentColor"
+  />
+  <path
+    d="M22 12C22 13.6569 20.6569 15 19 15C17.3431 15 16 13.6569 16 12C16 10.3431 17.3431 9 19 9C20.6569 9 22 10.3431 22 12Z"
+    fill="currentColor"
+  />
+  <path
+    d="M5 15C6.65685 15 8 13.6569 8 12C8 10.3431 6.65685 9 5 9C3.34315 9 2 10.3431 2 12C2 13.6569 3.34315 15 5 15Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/film.svg

@@ -0,0 +1,38 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7Z"
+    fill="currentColor"
+  />
+  <path
+    d="M17 8C17 7.44772 17.4477 7 18 7C18.5523 7 19 7.44772 19 8C19 8.55228 18.5523 9 18 9C17.4477 9 17 8.55228 17 8Z"
+    fill="currentColor"
+  />
+  <path
+    d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11Z"
+    fill="currentColor"
+  />
+  <path
+    d="M17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12Z"
+    fill="currentColor"
+  />
+  <path
+    d="M6 15C5.44772 15 5 15.4477 5 16C5 16.5523 5.44772 17 6 17C6.55228 17 7 16.5523 7 16C7 15.4477 6.55228 15 6 15Z"
+    fill="currentColor"
+  />
+  <path
+    d="M17 16C17 15.4477 17.4477 15 18 15C18.5523 15 19 15.4477 19 16C19 16.5523 18.5523 17 18 17C17.4477 17 17 16.5523 17 16Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4 3C2.34315 3 1 4.34315 1 6V18C1 19.6569 2.34315 21 4 21H20C21.6569 21 23 19.6569 23 18V6C23 4.34315 21.6569 3 20 3H4ZM20 5H4C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.44772 20.5523 5 20 5Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/heart.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12.0122 5.57169L10.9252 4.48469C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469C0.999162 6.63258 0.999162 10.115 3.14705 12.2629L11.9859 21.1017L11.9877 21.0999L12.014 21.1262L20.8528 12.2874C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923C18.705 2.36134 15.2226 2.36134 13.0747 4.50923L12.0122 5.57169ZM11.9877 18.2715L16.9239 13.3352L18.3747 11.9342L18.3762 11.9356L19.4386 10.8732C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344L12.0133 8.39904L12.006 8.3918L12.005 8.39287L9.51101 5.89891C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487L7.10068 13.3881L7.10248 13.3863L11.9877 18.2715Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/max.svg

@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/mini.svg

@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/options.svg

@@ -0,0 +1,20 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7 3C8.86384 3 10.4299 4.27477 10.874 6H19V8H10.874C10.4299 9.72523 8.86384 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3ZM7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 20C15.1362 20 13.5701 18.7252 13.126 17H5V15H13.126C13.5701 13.2748 15.1362 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20ZM17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-button-o.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
+    fill="currentColor"
+  />
+  <path d="M16 12L10 16.3301V7.66987L16 12Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/play-button-r.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5Z"
+    fill="currentColor"
+  />
+  <path d="M16 12L10 16.3301V7.66987L16 12Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/play-button.svg

@@ -0,0 +1,9 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/play-stop-o.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M15 9H9V15H15V9Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-stop-r.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M15 9H9V15H15V9Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1 5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5ZM5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-stop.svg

@@ -0,0 +1,9 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M7 7H17V17H7V7Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/play-track-next-o.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9V15C16 15.5523 15.5523 16 15 16C14.4477 16 14 15.5523 14 15V9ZM13 12L7 15.4641V8.5359L13 12Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-track-next-r.svg

@@ -0,0 +1,19 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9V15C17 15.5523 16.5523 16 16 16C15.4477 16 15 15.5523 15 15V9Z"
+    fill="currentColor"
+  />
+  <path d="M14 12L8 15.4641V8.5359L14 12Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1 5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5ZM5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-track-next.svg

@@ -0,0 +1,10 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M6 17L14 12L6 7V17Z" fill="currentColor" />
+  <path d="M18 7H15V12V17H18V7Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/play-track-prev-o.svg

@@ -0,0 +1,20 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 8C8.55228 8 9 8.44772 9 9V15C9 15.5523 8.55228 16 8 16C7.44771 16 7 15.5523 7 15V9C7 8.44772 7.44771 8 8 8ZM16 15.4641L10 12L16 8.5359V15.4641Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12ZM12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-track-prev-r.svg

@@ -0,0 +1,20 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 8C8.55228 8 9 8.44772 9 9V15C9 15.5523 8.55228 16 8 16C7.44771 16 7 15.5523 7 15V9C7 8.44772 7.44771 8 8 8ZM16 15.4641L10 12L16 8.5359V15.4641Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/play-track-prev.svg

@@ -0,0 +1,10 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M18 17L10 12L18 7V17Z" fill="currentColor" />
+  <path d="M6 7H9V17H6V7Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/search.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M18.319 14.4326C20.7628 11.2941 20.542 6.75347 17.6569 3.86829C14.5327 0.744098 9.46734 0.744098 6.34315 3.86829C3.21895 6.99249 3.21895 12.0578 6.34315 15.182C9.22833 18.0672 13.769 18.2879 16.9075 15.8442C16.921 15.8595 16.9351 15.8745 16.9497 15.8891L21.1924 20.1317C21.5829 20.5223 22.2161 20.5223 22.6066 20.1317C22.9971 19.7412 22.9971 19.1081 22.6066 18.7175L18.364 14.4749C18.3493 14.4603 18.3343 14.4462 18.319 14.4326ZM16.2426 5.28251C18.5858 7.62565 18.5858 11.4246 16.2426 13.7678C13.8995 16.1109 10.1005 16.1109 7.75736 13.7678C5.41421 11.4246 5.41421 7.62565 7.75736 5.28251C10.1005 2.93936 13.8995 2.93936 16.2426 5.28251Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/share.svg

@@ -0,0 +1,12 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M18 9C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6C15 6.12549 15.0077 6.24919 15.0227 6.37063L8.08261 9.84066C7.54305 9.32015 6.80891 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15C6.80891 15 7.54305 14.6798 8.08261 14.1593L15.0227 17.6294C15.0077 17.7508 15 17.8745 15 18C15 19.6569 16.3431 21 18 21C19.6569 21 21 19.6569 21 18C21 16.3431 19.6569 15 18 15C17.1911 15 16.457 15.3202 15.9174 15.8407L8.97733 12.3706C8.99229 12.2492 9 12.1255 9 12C9 11.8745 8.99229 11.7508 8.97733 11.6294L15.9174 8.15934C16.457 8.67985 17.1911 9 18 9Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/tikcode.svg

@@ -0,0 +1,29 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9 5H5V9H9V5ZM3 3V11H11V3H3Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 5H15V9H19V5ZM13 3V11H21V3H13Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9 15H5V19H9V15ZM3 13V21H11V13H3Z"
+    fill="currentColor"
+  />
+  <path d="M13 13H15V21H13V13Z" fill="currentColor" />
+  <path d="M16 13H18V21H16V13Z" fill="currentColor" />
+  <path d="M19 13H21V21H19V13Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/time.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M9 7H11V12H16V14H9V7Z" fill="currentColor" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
+    fill="currentColor"
+  />
+</svg>

src/assets/img/css.gg/trash.svg

@@ -0,0 +1,16 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 5V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4V5H4C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H5V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H17ZM15 4H9V5H15V4ZM17 7H7V18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18V7Z"
+    fill="currentColor"
+  />
+  <path d="M9 9H11V17H9V9Z" fill="currentColor" />
+  <path d="M13 9H15V17H13V9Z" fill="currentColor" />
+</svg>

src/assets/img/css.gg/tv.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 6.11861L9.4131 4.70551L11.5371 6.82954L14.3667 4L15.7782 5.41151L13.3137 7.87598H18C19.1046 7.87598 20 8.77141 20 9.87598V16.876C20 17.9805 19.1046 18.876 18 18.876H6C4.89543 18.876 4 17.9805 4 16.876V9.87598C4 8.77141 4.89543 7.87598 6 7.87598H9.75736L8 6.11861ZM18 9.87598H6V16.876H18V9.87598Z"
+    fill="currentColor"
+  />
+  <path d="M8 19.876H16V20.876H8V19.876Z" fill="currentColor" />
+</svg>

src/assets/img/ikonate/aperture.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="apertureIconTitle">Aperture</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"/> <g stroke-linecap="round"> <path d="M3 16H14.3164"/> <path d="M4.03589 6.20575L9.68257 15.9861"/> <path d="M13.0359 2.20575L7.37891 12.004"/> <path d="M10.9641 21.7942L16.6146 12.0074"/> <path d="M19.9641 17.7942L14.3086 7.99866"/> <path d="M21 7.98721H9.71844"/> </g> </svg>

src/assets/img/ikonate/back.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="backIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="backIconTitle">Backwards</title> <path d="M14 14.74L21 19V5l-7 4.26V5L2 12l12 7v-4.26z"/> </svg>

src/assets/img/ikonate/bell.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="bellIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bellIconTitle">Bell</title> <path stroke-linejoin="round" d="M10.5,4.5 C12.1666667,4.5 13.8333333,4.5 15.5,4.5 C17.5,4.5 18.8333333,3.83333333 19.5,2.5 L19.5,18.5 C18.8333333,17.1666667 17.5,16.5 15.5,16.5 C13.8333333,16.5 12.1666667,16.5 10.5,16.5 L10.5,16.5 C7.1862915,16.5 4.5,13.8137085 4.5,10.5 L4.5,10.5 C4.5,7.1862915 7.1862915,4.5 10.5,4.5 Z" transform="rotate(90 12 10.5)"/> <path d="M11,21 C12.1045695,21 13,20.1045695 13,19 C13,17.8954305 12.1045695,17 11,17" transform="rotate(90 12 19)"/> </svg>

src/assets/img/ikonate/bin.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="binIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="binIconTitle">Bin</title> <path d="M19 6L5 6M14 5L10 5M6 10L6 20C6 20.6666667 6.33333333 21 7 21 7.66666667 21 11 21 17 21 17.6666667 21 18 20.6666667 18 20 18 19.3333333 18 16 18 10"/> </svg>

src/assets/img/ikonate/close.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="closeIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="closeIconTitle">Close</title> <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"/> </svg>

src/assets/img/ikonate/favourite.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="favouriteIconTitle">Favourite</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"/> </svg>

src/assets/img/ikonate/feed.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="feedIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="feedIconTitle">Feed</title> <circle cx="7.5" cy="7.5" r="2.5"/> <path d="M22 13H2"/> <path d="M18 6h-5m5 3h-5"/> <path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"/> </svg>

src/assets/img/ikonate/forward.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="forwardIconTitle">Forward</title> <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"/> </svg>

src/assets/img/ikonate/lock-open.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="lockOpenIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="lockOpenIconTitle">Lock</title> <path d="M7,7.625 L7,7 C7,4.23857625 9.23857625,2 12,2 L12,2 C14.7614237,2 17,4.23857625 17,7 L17,11"/> <rect width="14" height="10" x="5" y="11"/> </svg>

src/assets/img/ikonate/lock.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="lockIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="lockIconTitle">Lock</title> <rect width="14" height="10" x="5" y="11"/> <path d="M12,3 L12,3 C14.7614237,3 17,5.23857625 17,8 L17,11 L7,11 L7,8 C7,5.23857625 9.23857625,3 12,3 Z"/> </svg>

src/assets/img/ikonate/minus.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="minusIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="minusIconTitle">最小化</title> <path d="M20,12 L4,12"/> </svg>

src/assets/img/ikonate/play.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="playIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="playIconTitle">Play</title> <path d="M20 12L5 21V3z"/> </svg>

src/assets/img/ikonate/plus.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="plusIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="plusIconTitle">Plus</title> <path d="M20 12L4 12M12 4L12 20"/> </svg>

src/assets/img/ikonate/qr.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="qrIconTitle">QR Code</title> <rect x="10" y="3" width="7" height="7" transform="rotate(90 10 3)"/> <rect width="1" height="1" transform="matrix(-1 0 0 1 7 6)"/> <rect x="10" y="14" width="7" height="7" transform="rotate(90 10 14)"/> <rect x="6" y="17" width="1" height="1"/> <rect x="14" y="20" width="1" height="1"/> <rect x="17" y="17" width="1" height="1"/> <rect x="14" y="14" width="1" height="1"/> <rect x="20" y="17" width="1" height="1"/> <rect x="20" y="14" width="1" height="1"/> <rect x="20" y="20" width="1" height="1"/> <rect x="21" y="3" width="7" height="7" transform="rotate(90 21 3)"/> <rect x="17" y="6" width="1" height="1"/> </svg>

src/assets/img/ikonate/search.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="searchIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="searchIconTitle">Search</title> <path d="M14.4121122,14.4121122 L20,20"/> <circle cx="10" cy="10" r="6"/> </svg>

src/assets/img/ikonate/settings.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="settingsIconTitle">Settings</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"/> <circle cx="12" cy="12" r="1"/> </svg>

src/assets/img/ikonate/share-android.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="shareAndroidIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="shareAndroidIconTitle">Share</title> <path d="M16 8L8 11 16 8zM16 16L8 13 16 16z"/> <circle cx="6" cy="12" r="2"/> <circle cx="18" cy="7" r="2"/> <circle cx="18" cy="17" r="2"/> </svg>

src/assets/img/ikonate/time.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="timeIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="timeIconTitle">Time</title> <circle cx="12" cy="12" r="10"/> <polyline points="12 5 12 12 16 16"/> </svg>

src/assets/img/ikonate/tv.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="tvIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="tvIconTitle">TV</title> <polygon points="20 8 20 20 4 20 4 8"/> <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"/> </svg>

src/assets/scss/animation.scss

@@ -0,0 +1,100 @@
+.AniSlideRight-enter-active, .AniSlideRight-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+.AniSlideRight-enter, .AniSlideRight-leave-to{
+  transform: translateX(50%);
+  opacity: 0;
+}
+.AniRotate-enter-active, .AniRotate-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+.AniRotate-enter, .AniRotate-leave-to{
+  transform: rotate(-180deg);
+  opacity: 0;
+}
+.AniSlideUp-enter-active, .AniSlideUp-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+.AniSlideUp-enter, .AniSlideUp-leave-to{
+  transform: translateY(50%);
+  opacity: 0;
+}
+
+@keyframes shake-bottom {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 100%;
+  }
+  10% {
+    transform: rotate(2deg);
+  }
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+  80% {
+    transform: rotate(-2deg);
+  }
+  90% {
+    transform: rotate(2deg);
+  }
+}
+@keyframes shake-top {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 0;
+  }
+  10% {
+    transform: rotate(2deg);
+  }
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+  80% {
+    transform: rotate(-2deg);
+  }
+  90% {
+    transform: rotate(2deg);
+  }
+}
+@keyframes shake-br {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 100% 100%;
+  }
+  10% {
+    transform: rotate(2deg);
+  }
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+  80% {
+    transform: rotate(-2deg);
+  }
+  90% {
+    transform: rotate(2deg);
+  }
+}

src/assets/scss/style.scss

@@ -1,217 +1,45 @@
-// 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{
+.zy-scrollbar{
   &::-webkit-scrollbar{
-    width: 5px;
+    width: 4px;
     height: 1px;
   }
   &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    position: absolute;
-  }
-  &::-webkit-scrollbar-track {
-    border-radius: 10px;
-    position: absolute;
+    border-radius: 2px;
   }
 }
-
-// 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);
+.zy-select{
+  width: 180px;
+  height: 34px;
+  cursor: pointer;
+  position: relative;
+  font-size: 14px;
+  margin-left: 10px;
+  .select-placeholder{
+    width: 180px;
+    height: 34px;
+    line-height: 34px;
+    padding-left: 10px;
   }
-  @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;
+  .select-list{
+    width: 180px;
+    position: absolute;
+    top: 34px;
+    left: 0;
+    z-index: 2;
+    max-height: 340px;
+    overflow: hidden;
+    &:hover{
+      overflow: auto;
     }
-    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;
+    ul{
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      li{
+        height: 34px;
+        line-height: 34px;
+        padding-left: 10px;
+      }
     }
   }
 }

src/assets/scss/theme.scss

@@ -1,61 +1,21 @@
 :root{
-  // light
+  // 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-f-1: #808695;
+  --l-f-2: #332f5c;
   --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: 0 1px 3px #8e8da233, 0 1px 2px #8e8da244;
+  --l-bsc-hover: 0 14px 28px #8e8da255, 0 10px 10px #8e8da244;
   --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;
+  --l-bsc-3: 0 0px 14px #8e8da255, 0 0px 10px #8e8da244;
+  --l-bsc-scroll: inset 0 0 5px #823aa000;
 }
 
-@import './theme/light.scss';
-@import './theme/dark.scss';
-@import './theme/green.scss';
-
+@import './theme/Light.scss';
+@import './animation.scss';
 @import './style.scss';

src/assets/scss/theme/Light.scss

@@ -0,0 +1,104 @@
+.theme-light{
+  background-color: var(--l-bgc-1);
+  .zy-scrollbar{
+    &::-webkit-scrollbar-thumb {
+      box-shadow: var(--l-bsc-scroll);
+      background: var(--l-c-5);
+    }
+    &::-webkit-scrollbar-track {
+      box-shadow: var(--l-bsc-scroll);
+      background: var(--l-bgc-1);
+    }
+  }
+  .zy-frame{
+    .middle{
+      .btn:hover{
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      .search{
+        .active{
+          stroke: var(--l-f-1);
+        }
+        .search-input{
+          color: var(--l-f-1);
+          border: none;
+          border-bottom: 1px solid var(--l-c-0);
+        }
+        .search-box{
+          color: var(--l-f-1);
+          background-color: var(--l-bgc-1);
+          box-shadow: var(--l-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--l-bsc-hover);
+          }
+          li:hover{
+            background-color: var(--l-bgc-2);
+          }
+        }
+      }
+    }
+    .right{
+      .btn:hover{
+        background-color: var(--l-bgc-2);
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      .close:hover{
+        .icon{
+          stroke: red;
+        }
+      }
+    }
+    .icon{
+      stroke: var(--l-c-0);
+    }
+  }
+  .zy-aside{
+    span{
+      &:hover{
+        background-color: var(--l-bgc-2);
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      &.active{
+        background-color: var(--l-bgc-2);
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      .icon{
+        stroke: var(--l-c-0);
+      }
+    }
+  }
+  .zy-film{
+    box-shadow: var(--l-bsc-3);
+    color: var(--l-f-1);
+    .select-placeholder{
+      box-shadow: var(--l-bsc);
+      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+      &:hover{
+        box-shadow: var(--l-bsc-hover);
+      }
+    }
+    .select-list{
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc-hover);
+      li:hover{
+        background-color: var(--l-bgc-2);
+      }
+      .active{
+        background-color: var(--l-bgc-2);
+      }
+    }
+  }
+  .zy-iptv{
+    box-shadow: var(--l-bsc-3);
+    color: var(--l-f-1);
+  }
+}

src/assets/scss/theme/dark.scss

@@ -1,349 +0,0 @@
-.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

@@ -1,349 +0,0 @@
-.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

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

src/background.js

@@ -1,43 +1,41 @@
 'use strict'
 
-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'
+import { app, protocol, BrowserWindow } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 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 } }])
+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,
+    resizable: true,
     webPreferences: {
       webSecurity: false,
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
-    },
-    // eslint-disable-next-line
-    icon: path.join(__static, 'icon.png')
+      enableRemoteModule: true,
+      nodeIntegration: true
+    }
   })
 
   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', () => {
@@ -45,78 +43,34 @@ function createWindow () {
   })
 }
 
-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
-
+// Quit when all windows are closed.
 app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
   if (process.platform !== 'darwin') {
     app.quit()
   }
 })
 
 app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
   if (win === null) {
     createWindow()
   }
-  if (mini === null) {
-    createMini()
-  }
-})
-
-ipcMain.on('min', () => {
-  win.minimize()
-})
-ipcMain.on('close', () => {
-  win.close()
-})
-
-ipcMain.on('mini', () => {
-  createMini()
-  win.close()
-})
-ipcMain.on('miniMin', () => {
-  mini.minimize()
-})
-ipcMain.on('miniClose', () => {
-  mini.close()
-  createWindow()
-})
-ipcMain.on('miniOpacity', (e, arg) => {
-  mini.setOpacity(arg)
 })
 
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
-  if (!process.env.WEBPACK_DEV_SERVER_URL) {
-    createProtocol('app')
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS_DEVTOOLS)
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
   }
   createWindow()
 })
@@ -124,7 +78,7 @@ app.on('ready', async () => {
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
   if (process.platform === 'win32') {
-    process.on('message', data => {
+    process.on('message', (data) => {
       if (data === 'graceful-exit') {
         app.quit()
       }

src/components/Aside.vue

@@ -1,56 +1,48 @@
 <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>
+  <div class="zy-aside">
+    <span :class="view === 'Film' ? 'active' : ''" title="电影" @click="changeView('Film')">
+      <IconFilm class="icon icon-film" />
     </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 :class="view === 'IPTV' ? 'active' : ''" title="TV" @click="changeView('IPTV')">
+      <IconTv class="icon icon-tv" />
     </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 :class="view === 'Play' ? 'active' : ''" title="播放" @click="changeView('Play')">
+      <IconPlay class="icon icon-play" />
     </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 :class="view === 'Star' ? 'active' : ''" title="收藏" @click="changeView('Star')">
+      <IconStar class="icon icon-star" />
+    </span>
+    <span :class="view === 'History' ? 'active' : ''" title="历史" @click="changeView('History')">
+      <IconHistory class="icon icon-history" />
+    </span>
+    <span :class="view === 'Setting' ? 'active' : ''" title="设置" @click="changeView('Setting')">
+      <IconSetting class="icon icon-setting" />
     </span>
   </div>
 </template>
 <script>
-import { mapMutations } from 'vuex'
+import IconFilm from '../assets/img/ikonate/aperture.svg'
+import IconTv from '../assets/img/ikonate/tv.svg'
+import IconPlay from '../assets/img/ikonate/play.svg'
+import IconStar from '../assets/img/ikonate/favourite.svg'
+import IconHistory from '../assets/img/ikonate/time.svg'
+import IconSetting from '../assets/img/ikonate/settings.svg'
 export default {
   name: 'Aside',
-  computed: {
-    view: {
-      get () {
-        return this.$store.getters.getView
-      },
-      set (val) {
-        this.SET_VIEW(val)
-      }
+  components: {
+    IconFilm,
+    IconTv,
+    IconPlay,
+    IconStar,
+    IconHistory,
+    IconSetting
+  },
+  data () {
+    return {
+      view: 'Film'
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW']),
     changeView (e) {
       this.view = e
     }
@@ -58,20 +50,30 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.aside{
+.zy-aside{
   width: 60px;
-  height: 100%;
-  user-select: none;
-  -webkit-app-region: drag;
   display: flex;
-  justify-content: center;
   align-items: center;
   flex-direction: column;
+  justify-content: center;
+  -webkit-app-region: drag;
   span{
-    -webkit-app-region: no-drag;
-    width: 60px;
+    width: 100%;
     height: 60px;
+    display: flex;
     cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    -webkit-app-region: no-drag;
+    &:hover, &.active{
+      .icon{
+        stroke-width: 2;
+      }
+    }
+    .icon{
+      width: 24px;
+      height: auto;
+    }
   }
 }
 </style>

src/components/Detail.vue

@@ -1,345 +0,0 @@
-<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

@@ -1,333 +1,83 @@
 <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 class="zy-film">
+    <div class="header">
+      <div class="zy-select film-site" @mouseleave="show.site = false">
+        <div class="select-placeholder" @click="show.site = !show.site">OK资源网</div>
+        <transition name="AniSlideUp">
+          <div class="select-list zy-scrollbar" v-show="show.site">
+            <ul>
+              <li class="active" @click="filmSiteClick()">OK资源网</li>
+              <li>最大资源网</li>
+              <li>卧龙资源网</li>
+            </ul>
+          </div>
+        </transition>
       </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 class="zy-select film-class" @mouseleave="show.class = false">
+        <div class="select-placeholder" @click="show.class = !show.class">最新</div>
+        <transition name="AniSlideUp">
+          <div class="select-list zy-scrollbar" v-show="show.class">
+            <ul>
+              <li class="active" @click="filmClassClick()">最新</li>
+              <li>动作片</li>
+              <li>卧龙资源网</li>
+            </ul>
+          </div>
+        </transition>
       </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 class="body zy-scrollbar">
+      <div class="wrapper">
+        <div v-for="i in 50" :key="i">laaldfa</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',
+  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
+        class: false
       }
     }
   },
-  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()
+    filmSiteClick () {},
+    filmClassClick () {}
   }
 }
 </script>
 <style lang="scss" scoped>
-.film{
-  height: 670px;
-  width: 100%;
+.zy-film{
+  flex: 1;
+  margin: 0 10px 20px 0;
+  border-radius: 6px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
-  animation: viewFadeIn 1s ease-in both;
-  .top{
-    width: 100%;
-    height: 30px;
+  .header{
+    height: 50px;
     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;
-        }
-      }
+    justify-content: flex-start;
+    .film-class{
+      margin-left: 20px;
     }
   }
-  .middle{
-    height: 620px;
-    width: 100%;
-    margin-top: 10px;
-    padding-bottom: 0px;
-    border-radius: 5px;
+  .body{
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    margin: 10px 10px 0;
+    &:hover{
+      overflow: auto;
+    }
+    .wrapper{
+      position: absolute;
+    }
   }
 }
 </style>

src/components/Frame.vue

@@ -1,65 +1,272 @@
 <template>
-  <div class="frame">
-    <span class="min" @click="frameClickEvent('min')"></span>
-    <span class="close" @click="frameClickEvent('close')"></span>
+  <div class="zy-frame">
+    <div class="left"></div>
+    <div class="middle">
+      <span class="btn lock" @click="frameClickEvent('top')" title="置顶">
+        <IconLock v-show="isTop" class="icon" />
+        <IconLockOpen v-show="!isTop" class="icon" />
+      </span>
+      <span class="btn bell" title="消息">
+        <IconBell class="icon" />
+      </span>
+      <div class="search" title="搜索">
+        <span class="btn" @click="searchBtnClick()">
+          <IconSearch :class="[search ? 'active ' : ''] + 'icon'" />
+        </span>
+        <transition name="AniSlideRight">
+          <input
+            v-if="search"
+            v-model.trim="searchTxt"
+            ref="searchInput"
+            autocomplete="off"
+            class="search-input"
+            @keyup.enter="searchEvent()"
+            type="text">
+        </transition>
+        <transition name="AniRotate">
+          <IconClose v-if="searchTxt.length > 0" class="icon icon-search-close" @click="clearSearchTxt()" />
+        </transition>
+        <transition name="AniSlideUp">
+          <div v-if="search" class="search-box zy-scrollbar">
+            <ul>
+              <li v-for="(i, j) in searchHistoryList" :key="j" @click="searchHistoryClick(i)">{{i}}</li>
+              <li class="clear" v-if="searchHistoryList.length >= 1" @click="clearSearchHistory()"><IconBin class="icon icon-bin" />清空搜索记录</li>
+            </ul>
+          </div>
+        </transition>
+      </div>
+    </div>
+    <div class="right">
+      <span class="btn min" @click="frameClickEvent('min')">
+        <IconMin class="icon" />
+      </span>
+      <span class="btn max" @click="frameClickEvent('max')">
+        <IconMax class="icon" />
+      </span>
+      <span class="btn close" @click="frameClickEvent('close')">
+        <IconClose class="icon" />
+      </span>
+    </div>
   </div>
 </template>
 <script>
-const ipc = require('electron').ipcRenderer
+import IconMin from '../assets/img/ikonate/minus.svg'
+import IconMax from '../assets/img/ikonate/plus.svg'
+import IconClose from '../assets/img/ikonate/close.svg'
+import IconSearch from '../assets/img/ikonate/search.svg'
+import IconLock from '../assets/img/ikonate/lock.svg'
+import IconLockOpen from '../assets/img/ikonate/lock-open.svg'
+import IconBell from '../assets/img/ikonate/bell.svg'
+import IconBin from '../assets/img/ikonate/bin.svg'
+const remote = require('electron').remote
+const win = remote.getCurrentWindow()
 export default {
   name: 'frame',
+  components: {
+    IconMin,
+    IconMax,
+    IconClose,
+    IconSearch,
+    IconLock,
+    IconLockOpen,
+    IconBell,
+    IconBin
+  },
+  data () {
+    return {
+      isTop: win.isAlwaysOnTop(),
+      search: false,
+      searchTxt: '',
+      searchHistoryList: [
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠'
+      ]
+    }
+  },
   methods: {
     frameClickEvent (e) {
-      ipc.send(e)
-    }
+      if (e === 'top') {
+        this.isTop = !this.isTop
+        win.setAlwaysOnTop(this.isTop)
+      }
+      if (e === 'min') {
+        win.minimize()
+      }
+      if (e === 'max') {
+        win.isMaximized() ? win.unmaximize() : win.maximize()
+      }
+      if (e === 'close') {
+        win.destroy()
+      }
+    },
+    searchBtnClick () {
+      this.search = !this.search
+      const timer = setTimeout(() => {
+        if (this.search) {
+          this.$refs.searchInput.focus()
+        }
+        clearTimeout(timer)
+      }, 600)
+    },
+    clearSearchTxt () {
+      this.searchTxt = ''
+      this.search = false
+    },
+    searchEvent () {},
+    searchHistoryClick (e) {},
+    clearSearchHistory () {}
   }
 }
 </script>
 <style lang="scss" scoped>
-.frame{
+.zy-frame{
   width: 100%;
-  height: 40px;
+  height: 50px;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  user-select: none;
+  justify-content: flex-start;
   -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;
+  .left{
+    height: 100%;
+    width: 60px;
+  }
+  .middle{
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .btn{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+      -webkit-app-region: no-drag;
+      &:hover{
+        .icon{
+          width: 20px;
+          height: auto;
+          stroke-width: 3px;
+        }
+      }
     }
-    @keyframes heartbeat {
-      from {
-        transform: scale(1);
-        transform-origin: center center;
-        animation-timing-function: ease-out;
+    .lock{
+      &:hover{
+        .icon{
+          animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+        }
       }
-      10% {
-        opacity: 1;
-        transform: scale(0.91);
-        animation-timing-function: ease-in;
+    }
+    .bell{
+      &:hover{
+        .icon{
+          animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+        }
       }
-      17% {
-        transform: scale(0.98);
-        animation-timing-function: ease-out;
+    }
+    .search{
+      height: 100%;
+      display: flex;
+      position: relative;
+      justify-content: center;
+      align-items: center;
+      .btn{
+        width: 60px;
+        &:hover{
+          .icon{
+            animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+          }
+        }
+        .active{
+          stroke-width: 3px;
+        }
       }
-      33% {
-        transform: scale(0.87);
-        animation-timing-function: ease-in;
+      .search-input{
+        position: absolute;
+        left: 40px;
+        height: 30px;
+        outline: none;
+        width: 180px;
+        padding-left: 4px;
+        padding-right: 20px;
+        -webkit-app-region: no-drag;
       }
-      45% {
-        transform: scale(1);
-        animation-timing-function: ease-out;
+      .icon-search-close{
+        position: absolute;
+        cursor: pointer;
+        -webkit-app-region: no-drag;
+        left: 200px;
+      }
+      .search-box{
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        width: 180px;
+        height: auto;
+        max-height: 172px;
+        overflow-y: hidden;
+        z-index: 3;
+        &:hover{
+          overflow-y: auto;
+        }
+        ul{
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          width: 180px;
+          li{
+            cursor: pointer;
+            font-size: 14px;
+            padding: 6px 10px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .clear{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .icon-bin{
+              margin-right: 4px;
+            }
+          }
+        }
       }
     }
   }
+  .right{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .btn{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+      -webkit-app-region: no-drag;
+      &:hover{
+        .icon{
+          stroke-width: 3px;
+        }
+      }
+    }
+  }
+  .icon{
+    width: 20px;
+    height: auto;
+  }
 }
 </style>

src/components/HelloWorld.vue

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

src/components/IPTV.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="zy-iptv">
+    <div class="box">
+      <div class="body">body</div>
+      <div class="footer">footer</div>
+    </div>
+    <div class="box"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'IPTV'
+}
+</script>
+<style lang="scss" scoped>
+.zy-iptv{
+  flex: 1;
+  margin: 0 10px 20px 0;
+  border-radius: 6px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  .body{
+    flex: 1;
+    border: 1px solid #000;
+  }
+  .footer{
+    height: 50px;
+    border: 1px solid #000;
+  }
+}
+</style>

src/components/Play.vue

@@ -1,513 +0,0 @@
-<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

@@ -1,244 +0,0 @@
-<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')}}</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'
-export default {
-  name: 'setting',
-  data () {
-    return {
-      s: {},
-      languages: [
-        {
-          key: 'zhCn',
-          name: '中文'
-        },
-        {
-          key: 'en',
-          name: 'English'
-        }
-      ],
-      sites: sites,
-      show: {
-        setting: false,
-        language: false,
-        site: false
-      }
-    }
-  },
-  computed: {
-    theme: {
-      get () {
-        return this.$store.getters.getTheme
-      },
-      set (val) {
-        this.SET_THEME(val)
-      }
-    },
-    language: {
-      get () {
-        return this.$store.getters.getLanguage
-      },
-      set (val) {
-        this.SET_LANGUAGE(val)
-      }
-    },
-    site: {
-      get () {
-        return this.$store.getters.getSite
-      },
-      set (val) {
-        this.SET_SITE(val)
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_THEME', 'SET_LANGUAGE', 'SET_SITE']),
-    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

@@ -1,197 +0,0 @@
-<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

@@ -1,159 +0,0 @@
-<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

@@ -1,22 +1,28 @@
 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'
+import Aside from './Aside'
+import Film from './Film'
+import IPTV from './IPTV'
+// import Play from './Play'
+// import Star from './Star'
+// import Setting from './Setting'
+// import Detail from './Detail'
+// import Share from './Share'
+// import History from './History'
+// import EditSites from './EditSites'
 
 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)
+    Vue.component('Aside', Aside)
+    Vue.component('Film', Film)
+    Vue.component('IPTV', IPTV)
+    // Vue.component('Play', Play)
+    // Vue.component('Star', Star)
+    // Vue.component('Setting', Setting)
+    // Vue.component('Detail', Detail)
+    // Vue.component('Share', Share)
+    // Vue.component('History', History)
+    // Vue.component('EditSites', EditSites)
   }
 }

src/lib/cloud/index.js

@@ -1,32 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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