🎏 IPTV

This reverts commit 8b78aafda4.

# Conflicts:
#	src/components/IPTV.vue

.browserslistrc

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

.env

@@ -1 +0,0 @@
-GH_TOKEN=97570b8c9f368027800fb555f9a860aa5bf91121

.eslintrc.js

@@ -3,16 +3,26 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
-    '@vue/standard',
-    '@vue/typescript'
+    '@vue/standard'
   ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
   parserOptions: {
-    parser: '@typescript-eslint/parser'
-  }
+    parser: 'babel-eslint'
+  },
+  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

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

.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,44 +1,29 @@
-<p align="center">
-<img src="https://i.loli.net/2020/01/20/WEj3Yw8rPXqTcHe.png" >
-</p>
-<p align="center">
-<img src="https://forthebadge.com/images/badges/built-with-love.svg">
-<img src="https://forthebadge.com/images/badges/made-with-vue.svg">
-<p>
-<p align="center">
-<img alt="GitHub" src="https://img.shields.io/github/license/Hunlongyu/ZY-Player?style=for-the-badge">
-<img alt="GitHub All Releases" src="https://img.shields.io/github/downloads/Hunlongyu/ZY-Player/total?style=for-the-badge">
-<img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/Hunlongyu/ZY-Player?include_prereleases&style=for-the-badge">
-<p>
+# zy
 
-# ZY Player
+## Project setup
+```
+yarn install
+```
 
-资源播放器, 提供影视资源的浏览,搜索,播放,收藏,查看详情等功能.
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
 
-### 截图: 
-主界面 ⬇
-![film.png](https://i.loli.net/2020/01/19/U1EPzoJHhTDnuxA.png)
-暗黑主题 ⬇
-![dark.png](https://i.loli.net/2020/01/20/eU6J3EFcPTXnjlK.png)
-搜索 ⬇
-![search.png](https://i.loli.net/2020/01/19/BPvJKxlnNfquRI4.png)
-搜索结果 ⬇
-![search-keyword.png](https://i.loli.net/2020/01/19/6wfY3rPBokM15hl.png)
-详情 ⬇
-![detail.png](https://i.loli.net/2020/01/19/CN8E1ikyMbhzo9t.png)
-播放 ⬇
-![play.png](https://i.loli.net/2020/01/19/4XlJRqmx2y8zAec.png)
-收藏 ⬇
-![star.png](https://i.loli.net/2020/01/19/Q2fkWUvaXKZJcS4.png)
+### Compiles and minifies for production
+```
+yarn build
+```
 
-### 下载:
+### Run your unit tests
+```
+yarn test:unit
+```
 
-[下载地址](https://github.com/Hunlongyu/ZY-Player/releases)
-
-### 未完成:
-1. 更新: 手动检测更新
-2. 图标: 求一个 zy 的logo, 256x256 像素的
-
-### 重要: 
-所有资源来自网上, 该软件不参与任何制作, 上传, 储存, 下载等内容. 该软件仅供学习参考, 请于安装后24小时内删除.
+### Lints and fixes files
+```
+yarn lint
+```
 
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

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

package.json

@@ -1,53 +1,48 @@
 {
   "name": "zy",
-  "version": "0.7.21",
-  "author": "Hunlongyu",
-  "description": "ZY Player 资源播放器",
+  "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",
-    "dev": "vue-cli-service electron:serve",
     "electron:build": "vue-cli-service electron:build",
+    "dev": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps",
-    "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
-    "bp": "vue-cli-service electron:build --win -p always"
+    "postuninstall": "electron-builder install-app-deps"
   },
   "main": "background.js",
   "dependencies": {
-    "core-js": "^3.4.4",
-    "dexie": "^2.0.4",
-    "electron-updater": "^4.2.0",
-    "element-ui": "^2.4.5",
-    "flyio": "^0.6.14",
-    "vue": "^2.6.10",
-    "vue-class-component": "^7.0.2",
-    "vue-property-decorator": "^8.3.0",
-    "vuex": "^3.1.2",
-    "xgplayer": "^2.4.7",
-    "xgplayer-hls.js": "^2.1.6"
+    "chai-as-promised": "^7.1.1",
+    "core-js": "^3.6.5",
+    "modern-normalize": "^1.0.0",
+    "vue": "^2.6.11",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-eslint": "^4.1.0",
-    "@vue/cli-plugin-router": "^4.1.0",
-    "@vue/cli-plugin-typescript": "^4.1.0",
-    "@vue/cli-plugin-vuex": "^4.1.0",
-    "@vue/cli-service": "^4.1.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/eslint-config-typescript": "^4.0.0",
-    "babel-plugin-component": "^1.1.1",
-    "electron": "^7.1.9",
-    "electron-icon-builder": "^1.0.2",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
-    "typescript": "~3.5.3",
-    "vue-cli-plugin-electron-builder": "^1.4.4",
-    "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.6.10"
+    "@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",
+    "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.5",
+    "sass-loader": "^8.0.2",
+    "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,12 +4,12 @@
     <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">
-    <title>ZY Player</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but zy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

@@ -1,140 +1,38 @@
 <template>
-  <el-container id="app" :class="appTheme">
-    <el-header class="Header">
-      <i class="el-icon-minus" @click="clickFrameEvent('min')"></i>
-      <i class="el-icon-plus" @click="clickFrameEvent('max')"></i>
-      <i class="el-icon-close" @click="clickFrameEvent('close')"></i>
-      <el-row class="Header-box">
-      </el-row>
-    </el-header>
-    <el-container>
-      <el-aside class="Aside" width="70px">
-        <el-row class="top">
-          <i :class="Main === 'Film' ? 'el-icon-film active' : 'el-icon-film'" @click="asideMenuClick('Film')"></i>
-          <i :class="Main === 'Search' ? 'el-icon-search active' : 'el-icon-search'" @click="asideMenuClick('Search')"></i>
-          <i :class="Main === 'Player' ? 'el-icon-video-play active' : 'el-icon-video-play'" @click="asideMenuClick('Player')"></i>
-          <i :class="Main === 'Star' ? 'el-icon-star-off active' : 'el-icon-star-off'" @click="asideMenuClick('Star')"></i>
-        </el-row>
-        <el-row class="bottom">
-          <i :class="Main === 'Setting' ? 'el-icon-setting active' : 'el-icon-setting'" @click="asideMenuClick('Setting')"></i>
-        </el-row>
-      </el-aside>
-      <el-main class="Main">
-        <Film v-show="Main === 'Film'" />
-        <Search v-show="Main === 'Search'" />
-        <Player v-show="Main === 'Player'" />
-        <Star v-show="Main === 'Star'" />
-        <Setting v-show="Main === 'Setting'" />
-      </el-main>
-    </el-container>
-    <el-drawer class="drawer" :visible.sync="detail.show" :show-close="true" size="90%" :with-header="true" direction="btt" title="详情">
-      <Detail />
-    </el-drawer>
-  </el-container>
+  <div id="app" class="theme-light">
+    <Frame />
+    <div class="main">
+      <Aside />
+      <Film v-show="view === 'Film'" />
+      <IPTV v-show="view === 'IPTV'" />
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import Detail from '@/components/detail.vue'
-import { mapMutations } from 'vuex'
-const { ipcRenderer: ipc } = require('electron')
-export default Vue.extend({
+<script>
+export default {
+  name: 'App',
   data () {
     return {
-      appTheme: 'theme-light'
-    }
-  },
-  computed: {
-    Main: {
-      get () {
-        return this.$store.getters.getMain
-      },
-      set (val) {
-        this.SET_MAIN(val)
-      }
-    },
-    detail: {
-      get () {
-        return this.$store.getters.getDetail
-      },
-      set (val) {
-        this.SET_DETAIL(val)
-      }
-    },
-    theme () {
-      return this.$store.getters.getTheme
-    }
-  },
-  watch: {
-    theme () {
-      this.changeTheme()
-    }
-  },
-  components: {
-    Detail
-  },
-  methods: {
-    ...mapMutations(['SET_DETAIL', 'SET_MAIN']),
-    clickFrameEvent (e:string) {
-      ipc.send(e)
-    },
-    asideMenuClick (e:string) {
-      this.Main = e
-    },
-    changeTheme () {
-      this.appTheme = `theme-${this.theme}`
+      view: 'IPTV'
     }
   }
-})
-</script>
-<style lang="scss">
-@import './assets/theme/global.scss';
-@import './assets/theme/dark.scss';
-@import './assets/theme/light.scss';
-*{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
 }
-html,body{
+</script>
+
+<style lang="scss">
+@import './assets/scss/theme.scss';
+html, body, #app{
   height: 100%;
+  overflow: hidden;
 }
 #app{
-  height: 100%;
-  .Header{
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  .main{
     display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    -webkit-app-region: drag;
-    -webkit-user-select: none;
-    padding: 0;
-    i{
-      width: 60px;
-      height: 60px;
-      font-size: 30px;
-      cursor: pointer;
-      -webkit-app-region: no-drag;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-  .Aside{
-    -webkit-app-region: drag;
-    -webkit-user-select: none;
-    text-align: center;
-    i{
-      -webkit-app-region: no-drag;
-      font-size: 32px;
-      width: 70px;
-      height: 70px;
-      line-height: 70px;
-      cursor: pointer;
-    }
-  }
-  .Main{
-    height: 100%;
-    overflow: hidden;
+    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

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

src/assets/scss/theme.scss

@@ -0,0 +1,21 @@
+:root{
+  // Light
+  --l-c-0: #823aa0;
+  --l-c-1: #823aa011;
+  --l-c-3: #823aa033;
+  --l-c-5: #823aa055;
+  --l-c-9: #823aa099;
+  --l-f-1: #808695;
+  --l-f-2: #332f5c;
+  --l-bgc-1: #ffffff;
+  --l-bgc-2: #f2f6f9;
+  --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-3: 0 0px 14px #8e8da255, 0 0px 10px #8e8da244;
+  --l-bsc-scroll: inset 0 0 5px #823aa000;
+}
+
+@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/theme/dark.scss

@@ -1,108 +0,0 @@
-.theme-dark{
-  color: var(--d-c); 
-  background-color: var(--d-bgc);
-  .el-button, input, select, .el-select{
-    color: var(--d-c);
-    background-color: var(--d-bgc);
-    border-color: var(--d-bdc);
-  }
-  .el-button--text{
-    border: none;
-  }
-  .el-tabs__item, .el-tabs__nav-wrap::after{
-    color: var(--d-c);
-    background-color: var(--d-bgc);
-    border-color: var(--d-dbc);
-  }
-  .el-table, .el-table th, .el-table tr,
-  .el-table--striped .el-table__body tr.el-table__row--striped td,
-  .el-table--enable-row-hover .el-table__body tr:hover>td,
-  .el-table td, .el-table th.is-leaf{
-    color: var(--d-c);
-    background-color: var(--d-bgc);
-    border-color: var(--d-dbc);
-  }
-  .el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
-  .el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li{
-    color: var(--d-c);
-    background-color: var(--d-bgc);
-  }
-  .el-input__inner,
-  .el-input-group__append, .el-input-group__prepend{
-    background-color: var(--d-bgc);
-    border-color: var(--d-dbc);
-  }
-  .el-select-dropdown{
-    color: var(--d-c);
-  }
-  .el-drawer{
-    background-color: var(--d-bgc) !important;
-    overflow: auto;
-    &::-webkit-scrollbar{
-      width: 0px;
-    }
-  }
-  .el-loading-mask{
-    background-color: var(--d-bgc);
-    opacity: 0.9;
-  }
-  .Header, .Aside{
-    i{
-      color: var(--d-icon);
-      &:hover{
-        color: var(--d-icon-h);
-        background-color: var(--d-bgc-h);
-      }
-    }
-  }
-  .Aside{
-    i{
-      &.active{
-        color: var(--d-icon-h);
-        background-color: var(--d-bgc-h);
-        border-left: 4px solid var(--d-icon-h);
-      }
-    }
-  }
-  .Main{
-    .film, .search, .star, .player{
-      .table-box{
-        &::-webkit-scrollbar-track {
-          box-shadow: inset 0 0 6px var(--d-bdc);
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: var(--d-icon);
-          outline: 1px solid var(--d-icon);
-        }
-      }
-    }
-    .setting{
-      .el-link, .card{
-        color: var(--d-c);
-        background-color: var(--d-bgc);
-        border-color: var(--d-bdc);
-      }
-    }
-  }
-  .detail{
-    color: var(--d-c);
-    &::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 6px var(--d-bdc);
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--d-icon);
-      outline: 1px solid var(--d-icon);
-    }
-    .box, .info, .urls{
-      border: 1px solid var(--d-bdc);
-    }
-    .vodInfo{
-      li, span, a{
-        color: var(--d-c);
-      }
-      label{
-        color: #f90;
-      }
-    }
-  }
-}

src/assets/theme/global.scss

@@ -1,19 +0,0 @@
-:root{
-  // light
-  --l-c: #808695;
-  --l-c-h: #515a6e;
-  --l-icon: #C0C4CC;
-  --l-icon-h: #515a6e;
-  --l-bgc: #ffffff;
-  --l-bgc-h: #efefef;
-  --l-bdc: #dcdee2;
-
-  // dark
-  --d-c: #919191;
-  --d-c-h: #454545;
-  --d-icon: #919191;
-  --d-icon-h: #919191;
-  --d-bgc: #242424;
-  --d-bgc-h: #454545;
-  --d-bdc: #7a7a7a;
-}

src/assets/theme/light.scss

@@ -1,74 +0,0 @@
-.theme-light{
-  color: var(--l-c); 
-  background-color: var(--l-bgc);
-  .el-table, .el-tabs__item, .btn-next, input{
-    color: var(--l-c);
-  }
-  .el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
-  .el-pagination .btn-next, .el-pagination .btn-prev{
-    color: var(--l-c);
-  }
-  .el-drawer{
-    overflow: auto;
-    &::-webkit-scrollbar{
-      width: 0px;
-    }
-  }
-  .Header, .Aside{
-    i{
-      color: var(--l-icon);
-      &:hover{
-        color: var(--l-icon-h);
-        background-color: var(--l-bgc-h);
-      }
-    }
-  }
-  .Aside{
-    i{
-      &.active{
-        color: var(--l-icon-h);
-        background-color: var(--l-bgc-h);
-        border-left: 4px solid var(--l-icon-h);
-      }
-    }
-  }
-  .Main{
-    .film, .search, .star, .player{
-      .table-box{
-        &::-webkit-scrollbar-track {
-          box-shadow: inset 0 0 6px var(--l-bdc);
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: var(--l-icon);
-          outline: 1px solid var(--l-icon);
-        }
-      }
-    }
-    .setting{
-      .el-link, .card{
-        color: var(--l-c);
-      }
-    }
-  }
-  .detail{
-    color: var(--l-c);
-    &::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 6px var(--l-bdc);
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--l-icon);
-      outline: 1px solid var(--l-icon);
-    }
-    .box, .info, .urls{
-      border: 1px solid var(--l-bdc);
-    }
-    .vodInfo{
-      li, span, a{
-        color: var(--l-c);
-      }
-      label{
-        color: #f90;
-      }
-    }
-  }
-}

src/background.js

@@ -1,20 +1,18 @@
 'use strict'
 
-import { app, protocol, ipcMain, 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: BrowserWindow | null
+let win
 
 // 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.
@@ -22,23 +20,22 @@ function createWindow () {
     width: 1080,
     height: 720,
     frame: false,
+    resizable: true,
     webPreferences: {
       webSecurity: false,
+      enableRemoteModule: true,
       nodeIntegration: true
-    },
-    // @ts-ignore
-    icon: path.join(__static, 'icon.png')
+    }
   })
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
-    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
+    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', () => {
@@ -63,42 +60,17 @@ app.on('activate', () => {
   }
 })
 
-ipcMain.on('min', () => {
-  if (win) {
-    win.minimize()
-  }
-})
-ipcMain.on('max', e => {
-  if (win) {
-    if (win.isMaximized()) {
-      win.unmaximize()
-    } else {
-      win.maximize()
-    }
-  }
-})
-ipcMain.on('close', e => {
-  if (win) {
-    win.close()
-  }
-})
-
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
   if (isDevelopment && !process.env.IS_TEST) {
     // Install Vue Devtools
-    // Devtools extensions are broken in Electron 6.0.0 and greater
-    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
-    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
-    // If you are not using Windows 10 dark mode, you may uncomment these lines
-    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
-    // try {
-    //   await installVueDevtools()
-    // } catch (e) {
-    //   console.error('Vue Devtools failed to install:', e.toString())
-    // }
+    try {
+      await installExtension(VUEJS_DEVTOOLS)
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
   }
   createWindow()
 })
@@ -106,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

@@ -0,0 +1,79 @@
+<template>
+  <div class="zy-aside">
+    <span :class="view === 'Film' ? 'active' : ''" title="电影" @click="changeView('Film')">
+      <IconFilm class="icon icon-film" />
+    </span>
+    <span :class="view === 'IPTV' ? 'active' : ''" title="TV" @click="changeView('IPTV')">
+      <IconTv class="icon icon-tv" />
+    </span>
+    <span :class="view === 'Play' ? 'active' : ''" title="播放" @click="changeView('Play')">
+      <IconPlay class="icon icon-play" />
+    </span>
+    <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 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',
+  components: {
+    IconFilm,
+    IconTv,
+    IconPlay,
+    IconStar,
+    IconHistory,
+    IconSetting
+  },
+  data () {
+    return {
+      view: 'Film'
+    }
+  },
+  methods: {
+    changeView (e) {
+      this.view = e
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.zy-aside{
+  width: 60px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  -webkit-app-region: drag;
+  span{
+    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/Film.vue

@@ -0,0 +1,83 @@
+<template>
+  <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>
+      <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="body zy-scrollbar">
+      <div class="wrapper">
+        <div v-for="i in 50" :key="i">laaldfa</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Film',
+  data () {
+    return {
+      show: {
+        site: false,
+        class: false
+      }
+    }
+  },
+  methods: {
+    filmSiteClick () {},
+    filmClassClick () {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.zy-film{
+  flex: 1;
+  margin: 0 10px 20px 0;
+  border-radius: 6px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  .header{
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .film-class{
+      margin-left: 20px;
+    }
+  }
+  .body{
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    margin: 10px 10px 0;
+    &:hover{
+      overflow: auto;
+    }
+    .wrapper{
+      position: absolute;
+    }
+  }
+}
+</style>

src/components/Frame.vue

@@ -0,0 +1,272 @@
+<template>
+  <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>
+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) {
+      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>
+.zy-frame{
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  -webkit-app-region: drag;
+  .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;
+        }
+      }
+    }
+    .lock{
+      &:hover{
+        .icon{
+          animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+        }
+      }
+    }
+    .bell{
+      &:hover{
+        .icon{
+          animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+        }
+      }
+    }
+    .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;
+        }
+      }
+      .search-input{
+        position: absolute;
+        left: 40px;
+        height: 30px;
+        outline: none;
+        width: 180px;
+        padding-left: 4px;
+        padding-right: 20px;
+        -webkit-app-region: no-drag;
+      }
+      .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/detail.vue

@@ -1,159 +0,0 @@
-<template>
-  <el-row class="detail">
-    <el-row class="detail-box" v-loading="loading">
-      <el-row v-html="detail.box" class="box"></el-row>
-      <el-row v-html="detail.info" class="info"></el-row>
-      <el-row class="urls">
-        <el-button size="mini" v-for="(i, j) in detail.urls" :key="j" @click="playBtn(i, j)">{{i | ftLink}}</el-button>
-      </el-row>
-    </el-row>
-  </el-row>
-</template>
-<script lang="ts">
-import Vue from 'vue'
-import zy from '@/lib/util.zy'
-import { mapMutations } from 'vuex'
-export default Vue.extend({
-  name: 'detail',
-  data () {
-    return {
-      detail: {},
-      loading: true
-    }
-  },
-  computed: {
-    d () {
-      return this.$store.getters.getDetail
-    },
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
-    Main: {
-      get () {
-        return this.$store.getters.getMain
-      },
-      set (val) {
-        this.SET_MAIN(val)
-      }
-    }
-  },
-  watch: {
-    d () {
-      this.getDetailEvent()
-    }
-  },
-  filters: {
-    ftLink (e: string) {
-      let name = e.split('$')[0]
-      return name
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_MAIN', 'SET_VIDEO']),
-    getDetailEvent () {
-      let url = this.d.video.detail
-      this.detail = {}
-      this.loading = true
-      zy.detail(url).then((res: any) => {
-        this.detail = res
-        this.loading = false
-      })
-    },
-    playBtn (i: string, j: number) {
-      if (this.Main !== 'Player') {
-        this.d.video.index = j
-        this.video = this.d.video
-        this.Main = 'Player'
-      } else {
-        this.d.video.index = j
-        this.video = this.d.video
-      }
-      this.d.show = false
-    }
-  },
-  created () {
-    this.getDetailEvent()
-  },
-  mounted () {}
-})
-</script>
-<style lang="scss">
-.detail{
-  box-sizing: border-box;
-  padding: 0 60px;
-  .detail-box{
-    width: 100%;
-    .box{
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      width: 100%;
-      padding: 10px;
-      .vodImg{
-        width: 200px;
-        img{
-          width: 100%;
-          height: auto;
-        }
-      }
-      .vodAd{
-        display: none;
-      }
-      .vodInfo{
-        flex: 1;
-        margin-left: 20px;
-        .vodh{
-          h2{
-            display: inline-block;
-          }
-          span{
-            font-size: 12px;
-            margin-left: 10px;
-          }
-          label{
-            font-size: 20px;
-            font-weight: bold;
-            margin-left: 20px;
-          }
-        }
-        .cont, .tags{
-          display: none;
-        }
-        li{
-          list-style: none;
-          font-size: 14px;
-          height: 20px;
-          overflow: hidden;
-          a{
-            display: none;
-            pointer-events: none;
-          }
-          span{
-            word-wrap:break-word
-          }
-        }
-      }
-    }
-    .info, .urls{
-      padding: 10px;
-      margin-top: 10px;
-    }
-    .info{
-      font-size: 14px;
-    }
-    .urls{
-      margin-bottom: 20px;
-      padding-bottom: 0;
-      button{
-        margin: 0 10px 10px 0;
-      }
-    }
-  }
-}
-</style>

src/components/register.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Frame from './Frame'
+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('Frame', Frame)
+    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/sites.ts

@@ -1,41 +0,0 @@
-interface Site {
-  id: string
-  name: string
-  url: string
-  type: Array<any>
-}
-
-const sites:Array<Site> = [
-  {
-    id: 'okzy',
-    name: 'OK资源网',
-    url: 'https://www.okzy.co',
-    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '21' ], [ '福利', '22' ], [ '解说', '33' ]]
-  },
-  {
-    id: 'zuidazy',
-    name: '最大资源网',
-    url: 'http://www.zuidazy1.com',
-    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '福利', '16' ], [ '伦理', '17' ], [ '音乐', '18' ]]
-  },
-  {
-    id: 'subo',
-    name: '速播资源站',
-    url: 'https://www.subo988.com',
-    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '16' ], [ '音乐', '20' ]]
-  },
-  {
-    id: 'zuixinzy',
-    name: '最新资源网',
-    url: 'http://www.zuixinzy.cc',
-    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], ['伦理', '21'], ['情色', '23'], [ '福利', '30' ], [ '解说', '34' ]]
-  },
-  {
-    id: '123ku',
-    name: '123资源网',
-    url: 'https://www.123ku.com',
-    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '16' ]]
-  }
-]
-
-export default sites

src/lib/util.zy.ts

@@ -1,171 +0,0 @@
-import fly from 'flyio'
-import sites from './sites'
-import { TimeSelect } from 'element-ui'
-
-interface ZY {
-  num: number
-  page: number
-  key: string
-  site: any
-  list: Array<string>
-  getInfoRequire: any
-  getInfoHtml: any
-  info: any
-  detail: any
-  films: any
-}
-
-interface info {
-  name?: string
-  type?: string
-  time?: string
-  detail?: string
-  urls?: Array<string>
-  index?: number
-}
-
-interface detail {
-  box?: any
-  info?: any
-  urls?: Array<string>
-}
-
-const zy: ZY = {
-  num: 0,
-  page: 1,
-  key: '',
-  site: {},
-  list: [],
-  getInfoRequire () {
-    return new Promise((resolve, reject) => {
-      let key = encodeURI(this.key)
-      const params = `${this.site.url}/index.php?m=vod-search-pg-${this.page}-wd-${key}.html`
-      fly.get(params).then(res => {
-        this.getInfoHtml(res.data).then((data: any) => {
-          resolve(data)
-        })
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  getInfoHtml (txt: string): any {
-    return new Promise((resolve, reject) => {
-      try {
-        const parser = new DOMParser()
-        const html = parser.parseFromString(txt, 'text/html')
-        const list: any = html.querySelectorAll('.xing_vb li')
-        let d: any = { list: [], total: 0 }
-        for (let i = 1; i < list.length - 1; i++) {
-          let info: info = {
-            name: list[i].childNodes[1].innerText,
-            type: list[i].childNodes[3].innerText,
-            time: list[i].childNodes[5].innerText,
-            detail: this.site.url + list[i].childNodes[1].childNodes[0].getAttribute('href'),
-            index: 0,
-            urls: []
-          }
-          d.list.push(info)
-        }
-        let num: any = (<HTMLImageElement>html.querySelectorAll('.nvc dd span')[1]).innerText
-        num = parseInt(num)
-        d.total = num
-        resolve(d)
-      } catch (err) {
-        reject(err)
-      }
-    })
-  },
-  info (n: number = 0, p: number = 1, k: string = '') {
-    return new Promise((resolve, reject) => {
-      this.num = n
-      this.page = p
-      this.key = k
-      this.site = sites[n]
-      this.getInfoRequire().then((res: any) => {
-        resolve(res)
-      }).catch((err: any) => {
-        reject(err)
-      })
-    })
-  },
-  detail (url: string) {
-    return new Promise((resolve, reject) => {
-      if (!url) return
-      fly.get(url).then(res => {
-        const parser = new DOMParser()
-        let html = parser.parseFromString(res.data, 'text/html')
-        let data: detail = {
-          box: '',
-          info: '',
-          urls: []
-        }
-        let vodBox = html.querySelector('.vodBox')
-        if (vodBox) {
-          data.box = vodBox.innerHTML
-        }
-        let vodInfo = {}
-        if (url.indexOf('123ku') !== -1 || url.indexOf('subo988') !== -1) {
-          vodInfo = html.querySelectorAll('.vodplayinfo')[1]
-        } else {
-          vodInfo = <HTMLImageElement>html.querySelector('.vodplayinfo')
-        }
-        data.info = (<HTMLImageElement>vodInfo).innerText
-        let urls = html.querySelectorAll('.vodplayinfo li')
-        let arr = []
-        for (let i in urls) {
-          let j = (<HTMLImageElement>urls[i]).innerText
-          if (j !== undefined && j.indexOf('.m3u8') !== -1) {
-            arr.push((<HTMLImageElement>urls[i]).innerText)
-          }
-        }
-        data.urls = arr
-        resolve(data)
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  films (n: number = 0, p: number = 1, type: string = '0') {
-    return new Promise((resolve, reject) => {
-      this.site = sites[n]
-      let url: string = sites[n].url
-      let params: string = ''
-      if (type === '0') {
-        params = `${url}/?m=vod-index-pg-${p}.html`
-      } else {
-        params = `${url}/?m=vod-type-id-${type}-pg-${p}.html`
-      }
-      fly.get(params).then(res => {
-        const parser = new DOMParser()
-        const html = parser.parseFromString(res.data, 'text/html')
-        const list: any = html.querySelectorAll('.xing_vb li')
-        let d: any = { list: [], total: 0 }
-        for (let i = 1; i < list.length - 1; i++) {
-          let info: info = {
-            name: list[i].childNodes[1].innerText,
-            type: list[i].childNodes[3].innerText,
-            time: list[i].childNodes[5].innerText,
-            detail: this.site.url + list[i].querySelector('a').getAttribute('href'),
-            index: 0,
-            urls: []
-          }
-          d.list.push(info)
-        }
-        let num: any = html.querySelectorAll('.pages')
-        if (num) {
-          let n = num[0].innerText
-          n = n.split('条')[0]
-          n = n.split('共')[1]
-          n = parseInt(n)
-          d.total = n
-        }
-        resolve(d)
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  }
-}
-
-export default zy

src/main.js

@@ -1,12 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
-import './plugins/element.ts'
-import Register from './page/register'
-
-Vue.config.productionTip = false
-
+import Register from './components/register'
+import 'modern-normalize'
 Register.registerComponents()
+Vue.config.productionTip = false
 
 new Vue({
   store,

src/page/film.vue

@@ -1,172 +0,0 @@
-<template>
-  <el-row class="film">
-    <el-row class="film-tabs">
-      <el-tabs v-model="tabs" @tab-click="tabClick">
-        <el-tab-pane class="film-tabpane" v-for="(i, j) in sites[site].type" :key="j" :label="i[0]" :name="i[1]"></el-tab-pane>
-      </el-tabs>
-    </el-row>
-    <el-row class="film-table-box table-box">
-      <el-table :data="filmData" stripe class="film-table" v-loading="loading" size="mini">
-        <el-table-column prop="name" label="影片名称"></el-table-column>
-        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
-        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
-        <el-table-column label="操作" width="120">
-          <template slot-scope="scope">
-            <el-button size="small" type="text" @click="tableBtnClick('detail', scope.row)">详情</el-button>
-            <el-button size="small" type="text" @click="tableBtnClick('star', scope.row)">收藏</el-button>
-            <el-button size="small" type="text" @click="tableBtnClick('play', scope.row)">播放</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-    <el-row class="film-bottom" type="flex" justify="space-between">
-      <el-select v-model="site" placeholder="请选择" size="small" @change="selectSite">
-        <el-option
-          v-for="(i, j) in sites"
-          :key="i.id"
-          :label="i.name"
-          :value="j">
-        </el-option>
-      </el-select>
-      <el-pagination
-        small
-        layout="total, prev, pager, next, jumper"
-        :current-page="filmPage"
-        @current-change="pageChange"
-        :page-size="50"
-        :total="filmTotal">
-      </el-pagination>
-    </el-row>
-  </el-row>
-</template>
-<script lang="ts">
-import Vue from 'vue'
-import zy from '@/lib/util.zy'
-import sites from '@/lib/sites'
-import { mapMutations } from 'vuex'
-import video from '@/plugins/dexie/video'
-export default Vue.extend({
-  data () {
-    return {
-      sites: sites,
-      tabs: '0',
-      filmPage: 1,
-      filmTotal: 0,
-      filmData: [],
-      loading: false
-    }
-  },
-  computed: {
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
-    site: {
-      get () {
-        return this.$store.getters.getSite
-      },
-      set (val) {
-        this.SET_SITE(val)
-      }
-    },
-    Main: {
-      get () {
-        return this.$store.getters.getMain
-      },
-      set (val) {
-        this.SET_MAIN(val)
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_SITE', 'SET_DETAIL', 'SET_MAIN', 'SET_VIDEO']),
-    tabClick (tab:any) {
-      this.filmPage = 1
-      this.getFilmList(this.site, this.filmPage, tab.name)
-    },
-    selectSite (e:any) {
-      this.site = e
-      this.tabs = '0'
-      this.filmPage = 1
-      this.getFilmList(e, 1, '0')
-    },
-    pageChange (e:number) {
-      this.filmPage = e
-      this.getFilmList(this.site, this.filmPage, this.tabs)
-    },
-    getFilmList (n: number = 0, p: number = 1, type: string = '0') {
-      this.loading = true
-      this.filmData = []
-      this.tabs = type
-      zy.films(n, p, type).then((res: any) => {
-        this.filmTotal = res.total
-        this.filmData = res.list
-        this.filmPage = p
-        this.loading = false
-      })
-    },
-    tableBtnClick (type: string, e: any) {
-      if (type === 'detail') {
-        let d = {
-          show: true,
-          video: e
-        }
-        this.SET_DETAIL(d)
-      }
-      if (type === 'star') {
-        video.find({ detail: e.detail }).then(res => {
-          if (res) {
-            this.$message.warning('已存在')
-          } else {
-            video.add(e).then(res => {
-              this.$message.success('收藏成功')
-            })
-          }
-        })
-      }
-      if (type === 'play') {
-        this.Main = 'Player'
-        this.video = e
-      }
-    }
-  },
-  created () {
-    this.getFilmList()
-  }
-})
-</script>
-<style lang="scss" scoped>
-.film{
-  height: 100%;
-  position: relative;
-  .film-tabs{
-    position: absolute;
-    top: 0px;
-    left: 0;
-    width: 100%;
-    height: 60px;
-  }
-  .film-table-box{
-    position: absolute;
-    top: 54px;
-    width: 100%;
-    height: calc(100% - 100px);
-    overflow: auto;
-    &::-webkit-scrollbar{
-      width: 6px;
-    }
-  }
-  .film-bottom{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 40px;
-    align-items: center;
-  }
-}
-</style>

src/page/player.vue

@@ -1,237 +0,0 @@
-<template>
-  <el-row class="player">
-    <el-row class="player-show" v-if="Object.keys(video).length > 0">
-      <el-row class="player-title">
-        <el-row class="player-title-box" type="flex" justify="space-between">
-          <span>
-            <span>{{video.name ? video.name + ' -- ' : '' }}</span>
-            <span>{{ num }}</span>
-          </span>
-          <span>
-            <el-button size="mini" @click="openDetail" icon="el-icon-document" circle></el-button>
-            <el-button size="mini" v-show="!star" @click="starEvent" icon="el-icon-star-off" circle></el-button>
-            <el-button size="mini" v-show="star" @click="starEvent" icon="el-icon-star-on" circle></el-button>
-          </span>
-        </el-row>
-      </el-row>
-      <el-row class="player-box">
-        <div id="xg"></div>
-      </el-row>
-      <el-row class="player-films table-box">
-        <el-row class="player-films-box">
-          <el-button :type="j === video.index ? 'primary' : ''" size="mini" v-for="(i, j) in urls" :key="j" @click="playBtnClick(i, j)" plain>{{i | ftLink}}</el-button>
-        </el-row>
-      </el-row>
-    </el-row>
-    <el-row class="player-none"  v-if="Object.keys(video).length <= 0">
-      <el-row class="tips">
-        浏览或者搜索资源, 点击播放视频, 即可观看~
-      </el-row>
-      <el-row class="btns">
-        <el-button size="small" @click="goView('Film')" icon="el-icon-film">浏览</el-button>
-        <el-button size="small" @click="goView('Search')" icon="el-icon-search">搜索</el-button>
-      </el-row>
-    </el-row>
-  </el-row>
-</template>
-<script lang="ts">
-import Vue from 'vue'
-import { mapMutations } from 'vuex'
-import zy from '@/lib/util.zy'
-import 'xgplayer'
-// @ts-ignore
-import Hls from 'xgplayer-hls.js'
-import video from '@/plugins/dexie/video'
-export default Vue.extend({
-  data () {
-    return {
-      xg: null,
-      config: {
-        id: 'xg',
-        url: '',
-        fluid: false,
-        autoplay: true,
-        videoInit: true,
-        keyShortcut: 'on',
-        defaultPlaybackRate: 1,
-        playbackRate: [0.5, 0.75, 1, 1.5, 2]
-      },
-      urls: [],
-      num: '',
-      star: false
-    }
-  },
-  computed: {
-    d () {
-      return this.$store.getters.getDetail
-    },
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
-    Main: {
-      get () {
-        return this.$store.getters.getMain
-      },
-      set (val) {
-        this.SET_MAIN(val)
-      }
-    }
-  },
-  watch: {
-    video: {
-      handler () {
-        this.getUrls()
-      },
-      deep: true
-    }
-  },
-  filters: {
-    ftLink (e: string) {
-      let name = e.split('$')[0]
-      return name
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_DETAIL', 'SET_VIDEO', 'SET_MAIN']),
-    goView (e: string) {
-      this.Main = e
-    },
-    openDetail () {
-      let d = {
-        show: true,
-        video: this.video
-      }
-      this.SET_DETAIL(d)
-    },
-    getUrls () {
-      if (this.xg) {
-        // @ts-ignore
-        this.xg.destroy(true)
-        this.xg = null
-      }
-      this.checkStar()
-      zy.detail(this.video.detail).then((res: any) => {
-        this.urls = res.urls
-        if (this.xg === null) {
-          let info: any = this.urls[this.video.index]
-          let url = info.split('$')[1]
-          this.num = info.split('$')[0]
-          this.config.url = url
-          this.$nextTick(() => {
-            this.xg = new Hls(this.config)
-            // @ts-ignore
-            this.xg.on('error', () => {
-              this.$message.error('播放失败请重试~')
-            })
-          })
-        }
-      })
-    },
-    checkStar () {
-      video.find({ detail: this.video.detail }).then(res => {
-        if (res) {
-          this.star = true
-        } else {
-          this.star = false
-        }
-      })
-    },
-    starEvent () {
-      video.find({ detail: this.video.detail }).then(res => {
-        if (res) {
-          video.remove(res.id).then(res => {
-            if (!res) {
-              this.$message.success('删除成功')
-              this.star = false
-            } else {
-              this.$message.warning('删除失败, 请重试~')
-            }
-          })
-        } else {
-          video.add(this.video).then(res => {
-            this.star = true
-            this.$message.success('收藏成功')
-          })
-        }
-      })
-    },
-    playBtnClick (i: string, j: number) {
-      if (this.video.index !== j) {
-        let url = i.split('$')[1]
-        this.num = i.split('$')[0]
-        this.video.index = j
-        // @ts-ignore
-        this.xg.src = url
-      }
-    }
-  }
-})
-</script>
-<style lang="scss" scoped>
-.player{
-  height: 100%;
-  width: 100%;
-  position: relative;
-  .player-show{
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-  .player-none{
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    .tips{
-      font-size: 14px;
-      margin-bottom: 10px;
-    }
-  }
-  .player-title{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 50px;
-    line-height: 50px;
-    .player-title-box{
-      width: 600px;
-      margin: 0 auto;
-    }
-  }
-  .player-box{
-    position: absolute;
-    top: 50px;
-    left: 0;
-    width: 100%;
-    height: 350px;
-    #xg{
-      margin: 0 auto;
-    }
-  }
-  .player-films{
-    position: absolute;
-    top: 400px;
-    left: 0;
-    width: 100%;
-    height: calc(100% - 400px);
-    overflow: auto;
-    button{
-      margin: 0 10px 10px 0;
-    }
-    &::-webkit-scrollbar{
-      width: 6px;
-    }
-    .player-films-box{
-      width: 600px;
-      margin: 0 auto;
-    }
-  }
-}
-</style>

src/page/register.ts

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Film from './film.vue'
-import Search from './search.vue'
-import Player from './player.vue'
-import Star from './star.vue'
-import Setting from './setting.vue'
-
-export default {
-  registerComponents () {
-    Vue.component('Film', Film)
-    Vue.component('Search', Search)
-    Vue.component('Player', Player)
-    Vue.component('Star', Star)
-    Vue.component('Setting', Setting)
-  }
-}

src/page/search.vue

@@ -1,193 +0,0 @@
-<template>
-  <el-row class="search">
-    <el-row class="search-box" :class="table === true ? 'search-box hasTable' : 'search-box'">
-      <el-input class="search-input" size="medium" clearable placeholder="请输入内容" v-model.trim="keywords" @change="searchEvent">
-        <el-select v-model="site" slot="prepend" placeholder="请选择" @change="selectSite" style="width: 130px;">
-          <el-option v-for="(i, j) in sites" :key="i.id" :label="i.name" :value="j"></el-option>
-        </el-select>
-        <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
-      </el-input>
-    </el-row>
-    <el-row v-show="table" class="search-table-box table-box">
-      <el-table :data="filmData" stripe class="search-table" size="mini" v-loading="loading">
-        <el-table-column prop="name" label="影片名称"></el-table-column>
-        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
-        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
-        <el-table-column label="操作" width="120">
-          <template slot-scope="scope">
-            <el-button size="small" type="text" @click="tableBtnClick('detail', scope.row)">详情</el-button>
-            <el-button size="small" type="text" @click="tableBtnClick('star', scope.row)">收藏</el-button>
-            <el-button size="small" type="text" @click="tableBtnClick('play', scope.row)">播放</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-    <el-row v-show="table" class="search-bottom" type="flex" justify="end">
-      <el-pagination
-        small
-        layout="total, prev, pager, next, jumper"
-        :current-page="filmPage"
-        :page-size="50"
-        @current-change="pageChange"
-        :total="filmTotal">
-      </el-pagination>
-    </el-row>
-  </el-row>
-</template>
-<script lang="ts">
-import Vue from 'vue'
-import sites from '@/lib/sites'
-import zy from '@/lib/util.zy'
-import { mapMutations } from 'vuex'
-import video from '@/plugins/dexie/video'
-export default Vue.extend({
-  data () {
-    return {
-      table: false,
-      sites: sites,
-      keywords: '',
-      filmData: [],
-      filmPage: 1,
-      filmTotal: 0,
-      loading: false
-    }
-  },
-  computed: {
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
-    site: {
-      get () {
-        return this.$store.getters.getSite
-      },
-      set (val) {
-        this.SET_SITE(val)
-      }
-    },
-    Main: {
-      get () {
-        return this.$store.getters.getMain
-      },
-      set (val) {
-        this.SET_MAIN(val)
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_SITE', 'SET_DETAIL', 'SET_MAIN', 'SET_VIDEO']),
-    selectSite (e:number) {
-      this.site = e
-      this.filmData = []
-      this.filmPage = 1
-      this.filmTotal = 0
-      this.searchEvent()
-    },
-    searchEvent () {
-      if (this.keywords !== '') {
-        this.loading = true
-        this.table = true
-        zy.info(this.site, this.filmPage, this.keywords).then((res: any) => {
-          this.filmData = res.list
-          this.filmTotal = res.total
-          this.loading = false
-        })
-      }
-    },
-    pageChange (e:number) {
-      this.filmPage = e
-      this.searchEvent()
-    },
-    tableBtnClick (type: string, e: any) {
-      if (type === 'detail') {
-        let d = {
-          show: true,
-          video: e
-        }
-        this.SET_DETAIL(d)
-      }
-      if (type === 'star') {
-        video.find({ detail: e.detail }).then(res => {
-          if (res) {
-            this.$message.warning('已存在')
-          } else {
-            video.add(e).then(res => {
-              this.$message.success('收藏成功')
-            })
-          }
-        })
-      }
-      if (type === 'play') {
-        this.Main = 'Player'
-        this.video = e
-      }
-    }
-  },
-  created () {}
-})
-</script>
-<style lang="scss" scoped>
-.search{
-  height: 100%;
-  position: relative;
-  .search-box{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    animation: slideDown 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    @keyframes slideDown {
-      from {
-        height: 40px;
-      }
-      to{
-        height: 90%;
-      }
-    }
-    &.hasTable{
-      animation: slideUp 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    }
-    @keyframes slideUp {
-      from {
-        height: 90%;
-        opacity: 0;
-      }
-      to{
-        height: 40px;
-        opacity: 1;
-      }
-    }
-  }
-  .search-table-box{
-    position: absolute;
-    top: 40px;
-    width: 100%;
-    height: calc(100% - 100px);
-    overflow: auto;
-    &::-webkit-scrollbar{
-      width: 6px;
-    }
-    .search-table{
-      width: 100%;
-    }
-  }
-  .search-bottom{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-}
-</style>

src/page/setting.vue

@@ -1,188 +0,0 @@
-<template>
-  <el-row class="setting">
-    <el-row class="item site">
-      <el-row class="title"><i class="el-icon-set-up"></i><span>默认资源</span></el-row>
-      <el-row class="info">
-        <el-select v-model="dbSite" placeholder="请选择" size="small" @change="selectSite">
-          <el-option
-            v-for="(i, j) in sites"
-            :key="i.id"
-            :label="i.name"
-            :value="j">
-          </el-option>
-        </el-select>
-      </el-row>
-    </el-row>
-    <el-row class="item theme">
-      <el-row class="title"><i class="el-icon-picture-outline-round"></i><span>主题</span></el-row>
-      <el-row class="card-box">
-        <el-card shadow="hover" class="card">
-          <img src="@/assets/image/light.png" class="image" @click="selectTheme('light')">
-          <span size="mini">Light</span>
-        </el-card>
-        <el-card shadow="hover" class="card">
-          <img src="@/assets/image/dark.png" class="image" @click="selectTheme('dark')">
-          <span size="mini">Dark</span>
-        </el-card>
-      </el-row>
-    </el-row>
-    <el-row class="item update about">
-      <el-row class="title"><i class="el-icon-refresh"></i><span>更新</span></el-row>
-      <el-row class="info">
-        <ul>
-          <li>当前版本: {{version}}</li>
-          <li>最新版本: {{version}}</li>
-        </ul>
-      </el-row>
-      <el-row class="btns">
-        <el-button v-show="download" size="small" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/latest')">下载更新</el-button>
-      </el-row>
-    </el-row>
-    <el-row class="item about">
-      <el-row class="title"><i class="el-icon-view"></i><span>关于</span></el-row>
-      <el-row class="info">
-        <ul>
-          <li><el-link :underline="false" @click="linkOpen('https://zy_player.hunlongyu.fun')">官网: ZY Player</el-link></li>
-          <li><el-link :underline="false" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈: Issues</el-link></li>
-        </ul>
-      </el-row>
-    </el-row>
-  </el-row>
-</template>
-<script lang="ts">
-import Vue from 'vue'
-import sites from '@/lib/sites'
-import { mapMutations } from 'vuex'
-import { shell } from 'electron'
-import site from '@/plugins/dexie/site'
-import theme from '@/plugins/dexie/theme'
-import fly from 'flyio'
-export default Vue.extend({
-  name: 'setting',
-  data () {
-    return {
-      sites: sites,
-      dbSite: 0,
-      version: 'v0.7.21',
-      download: false
-    }
-  },
-  computed: {
-    site: {
-      get () {
-        return this.$store.getters.getSite
-      },
-      set (val) {
-        this.SET_SITE(val)
-      }
-    },
-    theme: {
-      get () {
-        return this.$store.getters.getTheme
-      },
-      set (val) {
-        this.SET_THEME(val)
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_SITE', 'SET_THEME']),
-    linkOpen (e:string) {
-      if (e) {
-        shell.openExternal(e)
-      }
-    },
-    initSetting () {
-      site.find().then(res => {
-        if (!res) {
-          site.add({ site: 0 })
-        } else {
-          this.dbSite = res.site
-          this.site = res.site
-        }
-      })
-      theme.find().then(res => {
-        if (!res) {
-          theme.add({ theme: 'light' })
-        } else {
-          this.theme = res.theme
-        }
-      })
-    },
-    selectSite () {
-      site.update({ site: this.dbSite }).then(res => {
-        this.site = this.dbSite
-        this.$message.success('设置默认资源成功~')
-      }).catch(() => {
-        this.$message.warning('设置默认资源失败~')
-      })
-    },
-    selectTheme (e: string) {
-      theme.update({ theme: e }).then(res => {
-        this.theme = e
-        this.$message.success('切换主题成功~')
-      }).catch(() => {
-        this.$message.warning('切换主题失败~')
-      })
-    },
-    checkUpdate () {
-      fly.get('https://api.github.com/repos/Hunlongyu/ZY-Player/releases/latest').then(res => {
-        if (res.data.tag_name !== this.version) {
-          this.download = true
-        } else {
-          this.download = false
-        }
-      })
-    }
-  },
-  created () {
-    this.initSetting()
-    this.checkUpdate()
-  }
-})
-</script>
-<style lang="scss" scoped>
-.setting{
-  .item{
-    margin-bottom: 30px;
-    .title{
-      height: 24px;
-      line-height: 24px;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: center;
-      i{
-        font-size: 24px;
-        margin-right: 6px;
-      }
-    }
-  }
-  .about{
-    ul{
-      list-style: none;
-      li{
-        height: 30px;
-      }
-    }
-  }
-  .theme{
-    .card-box{
-      display: flex;
-      justify-content: flex-start;
-      .card{
-        width: 160px;
-        margin-right: 20px;
-        text-align: center;
-        img{
-          cursor: pointer;
-          width: 100%;
-        }
-        span{
-          font-size: 14px;
-          margin-top: 10px;
-        }
-      }
-    }
-  }
-}
-</style>

src/page/star.vue

@@ -1,128 +0,0 @@
-<template>
-  <el-row class="star">
-    <el-row class="star-table-box table-box">
-      <el-table :data="filmData" stripe class="film-table" size="mini" empty-text="收藏夹里空空的~快去填满我吧~">
-        <el-table-column prop="name" label="影片名称"></el-table-column>
-        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
-        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
-        <el-table-column label="操作" width="120">
-          <template slot-scope="scope">
-            <el-button size="small" type="text" @click="tableBtnClick('detail', scope.row)">详情</el-button>
-            <el-button size="small" type="text" @click="tableBtnClick('delete', scope.row)">删除</el-button>
-            <el-button size="small" type="text" @click="tableBtnClick('play', scope.row)">播放</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-    <el-row class="star-bottom">
-      <el-pagination
-        small
-        layout="total, prev, pager, next, jumper"
-        :current-page="filmPage"
-        :page-size="50"
-        :total="filmTotal">
-      </el-pagination>
-    </el-row>
-  </el-row>
-</template>
-<script lang="ts">
-import Vue from 'vue'
-import video from '@/plugins/dexie/video'
-import { mapMutations } from 'vuex'
-export default Vue.extend({
-  data () {
-    return {
-      filmData: [],
-      filmPage: 1,
-      filmTotal: 0
-    }
-  },
-  computed: {
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
-    Main: {
-      get () {
-        return this.$store.getters.getMain
-      },
-      set (val) {
-        this.SET_MAIN(val)
-      }
-    }
-  },
-  watch: {
-    Main: {
-      handler () {
-        this.getAllStar()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_DETAIL', 'SET_VIDEO', 'SET_MAIN']),
-    getAllStar () {
-      video.all().then(res => {
-        this.filmData = res
-        this.filmTotal = res.length
-      })
-    },
-    tableBtnClick (type: string, e: any) {
-      if (type === 'detail') {
-        let d = {
-          show: true,
-          video: e
-        }
-        this.SET_DETAIL(d)
-      }
-      if (type === 'delete') {
-        video.remove(e.id).then(res => {
-          if (!res) {
-            this.$message.success('删除成功')
-          } else {
-            this.$message.warning('删除失败, 请重试~')
-          }
-          this.getAllStar()
-        })
-      }
-      if (type === 'play') {
-        this.Main = 'Player'
-        this.video = e
-      }
-    }
-  },
-  created () {
-    this.getAllStar()
-  }
-})
-</script>
-<style lang="scss" scoped>
-.star{
-  height: 100%;
-  position: relative;
-  .star-table-box{
-    position: absolute;
-    top: 0px;
-    width: 100%;
-    height: calc(100% - 40px);
-    overflow: auto;
-    &::-webkit-scrollbar{
-      width: 6px;
-    }
-  }
-  .star-bottom{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-}
-</style>

src/plugins/dexie/index.ts

@@ -1,42 +0,0 @@
-import Dexie from 'dexie'
-
-class ZYDB extends Dexie {
-  theme: Dexie.Table<theme, number>
-  site: Dexie.Table<site, number>
-  video: Dexie.Table<video, number>
-
-  constructor () {
-    super('ZYDB')
-    this.version(1).stores({
-      theme: '++id, theme',
-      site: '++id, site',
-      video: '++id, name, type, time, detail, urls, index'
-    })
-
-    this.theme = this.table('theme')
-    this.site = this.table('site')
-    this.video = this.table('video')
-  }
-}
-
-export interface theme {
-  id: number
-  theme?: string
-}
-
-export interface site {
-  id: number
-  site?: number
-}
-
-export interface video {
-  id?: number
-  name?: string
-  type?: string
-  time?: string
-  detail?: string
-  urls?: Array<string>
-  index?: number
-}
-
-export default new ZYDB()

src/plugins/dexie/site.ts

@@ -1,33 +0,0 @@
-import db from './index'
-
-export default {
-  add (data: any): Promise<any> {
-    return new Promise((resolve, reject) => {
-      db.site.add(data).then(res => {
-        resolve(res)
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  find (): Promise<any> {
-    return new Promise((resolve, reject) => {
-      db.site.get(1).then((res: any) => {
-        resolve(res)
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  update (data: any): Promise<any> {
-    return new Promise((resolve, reject) => {
-      db.site.update(1, data).then(updated => {
-        if (updated) {
-          resolve(updated)
-        } else {
-          reject(updated)
-        }
-      })
-    })
-  }
-}

src/plugins/dexie/theme.ts

@@ -1,33 +0,0 @@
-import db from './index'
-
-export default {
-  add (data: any): Promise<any> {
-    return new Promise((resolve, reject) => {
-      db.theme.add(data).then(res => {
-        resolve(res)
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  find (): Promise<any> {
-    return new Promise((resolve, reject) => {
-      db.theme.get(1).then((res: any) => {
-        resolve(res)
-      }).catch(err => {
-        reject(err)
-      })
-    })
-  },
-  update (data: any): Promise<any> {
-    return new Promise((resolve, reject) => {
-      db.theme.update(1, data).then(updated => {
-        if (updated) {
-          resolve(updated)
-        } else {
-          reject(updated)
-        }
-      })
-    })
-  }
-}