v0.7.18 完成换肤功能, 但是待优化

Author: Hunlongyu

.env

@@ -1 +1 @@
-GH_TOKEN=fc794ea58a602f31788c54d612afa4bbd1e225c4
+GH_TOKEN=bf20e1fde476eafdc8d67c0cd7b9fe8bf3c063fe

README.md

@@ -10,7 +10,7 @@
 
 # ZY Player
 
-资源播放器, 提供影视资源的搜索,查看,播放,搜藏等功能.
+资源播放器, 提供影视资源的浏览,搜索,播放,收藏,查看详情等功能.
 
 ### 截图: 
 主界面 ⬇
@@ -23,7 +23,7 @@
 ![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)
 
 ### 下载:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zy",
-  "version": "0.7.17",
+  "version": "0.7.18",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container id="app" class="theme-light">
+  <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>
@@ -40,7 +40,9 @@ import { mapMutations } from 'vuex'
 const { ipcRenderer: ipc } = require('electron')
 export default Vue.extend({
   data () {
-    return {}
+    return {
+      appTheme: 'theme-light'
+    }
   },
   computed: {
     Main: {
@@ -58,6 +60,14 @@ export default Vue.extend({
       set (val) {
         this.SET_DETAIL(val)
       }
+    },
+    theme () {
+      return this.$store.getters.getTheme
+    }
+  },
+  watch: {
+    theme () {
+      this.changeTheme()
     }
   },
   components: {
@@ -70,9 +80,11 @@ export default Vue.extend({
     },
     asideMenuClick (e:string) {
       this.Main = e
+    },
+    changeTheme () {
+      this.appTheme = `theme-${this.theme}`
     }
-  },
-  created () {}
+  }
 })
 </script>
 <style lang="scss">

src/page/setting.vue

@@ -1,27 +1,40 @@
 <template>
   <el-row class="setting">
-    <el-row class="item about">
-      <el-row class="title"><i class="el-icon-view"></i><span>关于</span></el-row>
+    <el-row class="item site">
+      <el-row class="title"><i class="el-icon-set-up"></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-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">
+          <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/light.png" class="image">
+          <img src="@/assets/image/light.png" class="image" @click="selectTheme('dark')">
           <span size="mini">Dark</span>
         </el-card>
       </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 class="item update">
       <el-row class="title"><i class="el-icon-refresh"></i><span>更新</span></el-row>
       <el-row class="btns">
@@ -32,17 +45,81 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import sites from '@/lib/sites'
+import { mapMutations } from 'vuex'
 import { shell } from 'electron'
-import setting from '@/plugins/dexie/setting'
+import site from '@/plugins/dexie/site'
+import theme from '@/plugins/dexie/theme'
 export default Vue.extend({
+  name: 'setting',
+  data () {
+    return {
+      sites: sites,
+      dbSite: 0
+    }
+  },
+  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('切换主题失败~')
+      })
     }
   },
-  created () {}
+  created () {
+    this.initSetting()
+  }
 })
 </script>
 <style lang="scss" scoped>
@@ -77,8 +154,8 @@ export default Vue.extend({
         width: 160px;
         margin-right: 20px;
         text-align: center;
-        cursor: pointer;
         img{
+          cursor: pointer;
           width: 100%;
         }
         span{

src/plugins/dexie/index.ts

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

src/plugins/dexie/setting.ts renamed to src/plugins/dexie/site.ts

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

src/plugins/dexie/theme.ts

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

src/plugins/dexie/video.ts

@@ -10,7 +10,7 @@ export default {
       })
     })
   },
-  find (data?: any): Promise<any> {
+  find (data: any): Promise<any> {
     return new Promise((resolve, reject) => {
       db.video.get(data).then(res => {
         resolve(res)

src/store/index.ts

@@ -7,6 +7,7 @@ export default new Vuex.Store({
   state: {
     Main: 'Search',
     site: 0,
+    theme: 'light',
     detail: {
       show: false,
       video: ''
@@ -21,6 +22,9 @@ export default new Vuex.Store({
     getSite: state => {
       return state.site
     },
+    getTheme: state => {
+      return state.theme
+    },
     getDetail: state => {
       return state.detail
     },
@@ -35,6 +39,9 @@ export default new Vuex.Store({
     SET_SITE: (state, payload) => {
       state.site = payload
     },
+    SET_THEME: (state, payload) => {
+      state.theme = payload
+    },
     SET_DETAIL: (state, payload) => {
       state.detail = payload
     },