🧶 Demo功能迁移完成

src/App.vue

@@ -1,8 +1,33 @@
 <template>
-  <div id="app" class="theme-light">
+  <div id="app" :class="appTheme">
     <router-view/>
   </div>
 </template>
+<script>
+export default {
+  name: 'App',
+  data () {
+    return {
+      appTheme: 'theme-light'
+    }
+  },
+  computed: {
+    theme () {
+      return this.$store.getters.getTheme
+    }
+  },
+  watch: {
+    theme () {
+      this.changeTheme()
+    }
+  },
+  methods: {
+    changeTheme () {
+      this.appTheme = `theme-${this.theme}`
+    }
+  }
+}
+</script>
 
 <style lang="scss">
 @import './assets/scss/theme.scss';

src/assets/scss/theme/light.scss

@@ -297,6 +297,12 @@
         box-shadow: var(--l-bsc);
         &:hover{
           box-shadow: var(--l-bsc-hover);
+          .theme-name{
+            color: var(--l-fc-2)
+          }
+        }
+        .theme-name{
+          color: var(--l-fc-1);
         }
       }
     }

src/background.js

@@ -10,6 +10,7 @@ const isDevelopment = process.env.NODE_ENV !== 'production'
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win
+let mini
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
@@ -43,6 +44,29 @@ function createWindow () {
   })
 }
 
+function createMini () {
+  mini = new BrowserWindow({
+    // width: 540,
+    // height: 360,
+    width: 980,
+    height: 720,
+    frame: true,
+    resizable: true,
+    transparent: false,
+    webPreferences: {
+      webSecurity: false
+    },
+    parent: win,
+    modal: true,
+    show: false
+  })
+  mini.loadURL('http://localhost:8080/#/mini')
+  // mini.show()
+  mini.once('ready-to-show', () => {
+    mini.show()
+  })
+}
+
 app.allowRendererProcessReuse = true
 
 app.on('window-all-closed', () => {
@@ -80,20 +104,11 @@ ipcMain.on('checkTop', (e) => {
   }
 })
 
+ipcMain.on('mini', () => {
+  createMini()
+})
+
 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())
-    // }
-  }
   createWindow()
 })
 

src/components/Play.vue

@@ -51,13 +51,13 @@
             <path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"></path>
           </svg>
         </span>
-        <!-- <span class="zy-svg" @click="smallEvent" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="smallEvent">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
-            <title id="tvIconTitle">精简模式</title>
+            <title id="tvIconTitle">{{$t('mini')}}</title>
             <polygon points="20 8 20 20 4 20 4 8"></polygon>
             <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
           </svg>
-        </span> -->
+        </span>
         <span class="zy-svg" @click="shareEvent" v-show="right.listData.length > 0">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle">
             <title id="qrIconTitle">{{$t('share')}}</title>
@@ -347,7 +347,9 @@ export default {
         v: this.video
       }
     },
-    smallEvent () {}, // TODO 小窗口模式
+    smallEvent () { // TODO 小窗口模式
+      ipc.send('mini')
+    },
     shareEvent () {
       this.share = {
         show: true,

src/components/Setting.vue

@@ -1,37 +1,49 @@
 <template>
-  <div class="setting zy-scroll" v-if="show.setting">
-    <div class="logo"><img src="@/assets/image/logo.png"></div>
-    <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues">{{$t('issues')}}</a></div>
-    <div class="change">
-      <div class="zy-select" @mouseleave="show.language = false">
-        <div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
-        <div class="vs-options" v-show="show.language">
-          <ul>
-            <li :class="s.language === i.key ? 'active' : ''" v-for="(i, j) in languages" :key="j" @click="languageClick(i.key)">{{ i.name }}</li>
-          </ul>
+  <div class="setting">
+    <div class="setting-box zy-scroll" v-if="show.setting">
+      <div class="logo"><img src="@/assets/image/logo.png"></div>
+      <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues">{{$t('issues')}}</a></div>
+      <div class="change">
+        <div class="zy-select" @mouseleave="show.language = false">
+          <div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
+          <div class="vs-options" v-show="show.language">
+            <ul>
+              <li :class="s.language === i.key ? 'active' : ''" v-for="(i, j) in languages" :key="j" @click="languageClick(i.key)">{{ i.name }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="zy-select" @mouseleave="show.site = false">
+          <div class="vs-placeholder" @click="show.site = true">{{$t('default_site')}}</div>
+          <div class="vs-options" v-show="show.site">
+            <ul>
+              <li :class="s.site === i.key ? 'active' : ''" v-for="(i, j) in sites" :key="j" @click="siteClick(i.key)">{{ i.name }}</li>
+            </ul>
+          </div>
         </div>
       </div>
-      <div class="zy-select" @mouseleave="show.site = false">
-        <div class="vs-placeholder" @click="show.site = true">{{$t('default_site')}}</div>
-        <div class="vs-options" v-show="show.site">
-          <ul>
-            <li :class="s.site === i.key ? 'active' : ''" v-for="(i, j) in sites" :key="j" @click="siteClick(i.key)">{{ i.name }}</li>
-          </ul>
+      <div class="theme">
+        <div class="title">{{$t('theme')}}</div>
+        <div class="theme-box">
+          <div @click="changeTheme('light')" class="theme-item light">
+            <div class="theme-image">
+              <img src="../assets/image/light.png" alt="">
+            </div>
+            <div class="theme-name">Light</div>
+          </div>
+          <div @click="changeTheme('dark')" class="theme-item dark">
+            <div class="theme-image">
+              <img src="../assets/image/dark.png" alt="">
+            </div>
+            <div class="theme-name">Dark</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="theme">
-      <div class="title">{{$t('theme')}}</div>
-      <div class="theme-box">
-        <div class="theme-item light"></div>
-        <div class="theme-item dark"></div>
-      </div>
-    </div>
-    <div class="qrcode">
-      <div class="title">{{$t('donate')}}</div>
-      <div class="qrcode-box">
-        <div class="qrcode-item zfb"></div>
-        <div class="qrcode-item wx"></div>
+      <div class="qrcode">
+        <div class="title">{{$t('donate')}}</div>
+        <div class="qrcode-box">
+          <img class="qrcode-item" src="../assets/image/alipay.png">
+          <img class="qrcode-item" src="../assets/image/wepay.jpg">
+        </div>
       </div>
     </div>
   </div>
@@ -107,11 +119,19 @@ export default {
       setting.update(this.s).then(res => {
         this.$message.success(this.$t('set_success'))
       })
+    },
+    changeTheme (e) {
+      this.theme = e
+      this.s.theme = e
+      setting.update(this.s).then(res => {
+        this.$message.success(this.$t('set_success'))
+      })
     }
   },
   created () {
     setting.find().then(res => {
       this.s = res
+      this.theme = res.theme
       this.$i18n.locale = this.s.language
       this.show.setting = true
     })
@@ -122,12 +142,17 @@ export default {
 .setting{
   height: 660px;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  border-radius: 5px;
-  overflow-y: auto;
+  padding: 20px 0;
+  .setting-box{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    overflow-y: auto;
+  }
  .logo{
-    margin-top: 40px;
+    margin-top: 10px;
     width: 100%;
     text-align: center;
     img{
@@ -165,10 +190,21 @@ export default {
       margin-top: 10px;
       .theme-item{
         width: 200px;
-        height: 200px;
+        height: 180px;
         margin-right: 20px;
         cursor: pointer;
         border-radius: 2px;
+        .theme-image{
+          width: 180px;
+          margin: 10px auto;
+          img{
+            width: 100%;
+          }
+        }
+        .theme-name{
+          width: 100%;
+          text-align: center;
+        }
       }
     }
   }
@@ -182,8 +218,8 @@ export default {
       justify-content: flex-start;
       margin-top: 10px;
       .qrcode-item{
-        width: 200px;
-        height: 200px;
+        width: auto;
+        height: 300px;
         margin-right: 20px;
         border-radius: 2px;
       }

src/locales/en.json

@@ -19,6 +19,7 @@
     "play_list": "Play List",
     "history": "History",
     "top": "Top",
+    "mini": "Mini",
     "no_data": "No Data",
     "clear_data": "Clear Data",
     "delete": "Delete",

src/locales/zh-cn.json

@@ -19,6 +19,7 @@
     "play_list": "播放列表",
     "history": "历史记录",
     "top": "置顶",
+    "mini": "精简模式",
     "no_data": "无数据",
     "clear_data": "清空数据",
     "delete": "删除",

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Mini from '../views/Mini.vue'
 
 Vue.use(VueRouter)
 
@@ -11,9 +12,9 @@ const routes = [
     component: Home
   },
   {
-    path: '/small',
-    name: 'Small',
-    component: () => import(/* webpackChunkName: "small" */ '../views/Small.vue')
+    path: '/mini',
+    name: 'Mini',
+    component: Mini
   }
 ]
 

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    view: 'Film',
+    view: 'Play',
     theme: 'light',
     site: 'zuidazy',
     language: 'zhCn',

src/views/Mini.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="mini">
+    <h1>This is an small page</h1>
+    <p>lalala</p>
+  </div>
+</template>
+<script>
+export default {
+  name: 'mini',
+  created () {
+    console.log(window.location.href)
+  }
+}
+</script>

src/views/Small.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="small">
-    <h1>This is an small page</h1>
-  </div>
-</template>
-<script>
-export default {
-  name: 'small'
-}
-</script>