sider and frame done

src/App.vue

@@ -5,11 +5,7 @@
         <Layout>
             <Header class="header"><ZYHeader /></Header>
             <Content class="content">
-              <ZYContent />
-              <Row>
-                <Button type="primary" @click="switchTheme('light')">light</Button>
-                <Button type="primary" @click="switchTheme('dark')">Dark</Button>
-              </Row>
+              <router-view />
             </Content>
         </Layout>
     </Layout>
@@ -18,24 +14,21 @@
 <script>
 import ZYSider from '@/components/zy_sider.vue'
 import ZYHeader from '@/components/zy_header.vue'
-import ZYContent from '@/components/zy_content.vue'
 export default {
   name: 'app',
   data () {
-    return {
-      theme: 'light'
+    return {}
+  },
+  computed: {
+    theme () {
+      return this.$store.getters.getTheme
     }
   },
   components: {
     ZYSider,
-    ZYHeader,
-    ZYContent
+    ZYHeader
   },
-  methods: {
-    switchTheme (e) {
-      this.theme = e
-    }
-  }
+  methods: {}
 }
 </script>
 

src/background.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, ipcMain, BrowserWindow } from 'electron'
 import {
   createProtocol
 } from 'vue-cli-plugin-electron-builder/lib'
@@ -58,6 +58,16 @@ app.on('activate', () => {
   }
 })
 
+ipcMain.on('min', e => win.minimize())
+ipcMain.on('max', e => {
+  if (win.isMaximized()) {
+    win.unmaximize()
+  } else {
+    win.maximize()
+  }
+})
+ipcMain.on('close', e => win.close())
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.

src/components/zy_header.vue

@@ -1,18 +1,19 @@
 <template>
   <Row class="header-box">
-    <div class="left">
-      <Icon type="md-return-left" />
-    </div>
-    <div class="right">
-      <Icon type="md-remove" />
-      <Icon type="md-add" />
-      <Icon type="md-close" />
-    </div>
+    <Icon type="md-remove" @click="clickFrameEvent('min')" />
+    <Icon type="md-add" @click="clickFrameEvent('max')" />
+    <Icon type="md-close" @click="clickFrameEvent('close')" />
   </Row>
 </template>
 <script>
+const { ipcRenderer: ipc } = require('electron')
 export default {
-  name: 'zy_header'
+  name: 'zy_header',
+  methods: {
+    clickFrameEvent (e) {
+      ipc.send(e)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -21,23 +22,14 @@ export default {
   -webkit-app-region: drag;
   -webkit-user-select: none;
   display: flex;
-  justify-content: space-between;
-  .left,.right{
-    display: flex;
-    align-items: center;
-    height: 50px;
-    width: 50%;
-    i{
-      font-size: 20px;
-      width:50px;
-      height:50px;
-      line-height:50px;
-      cursor: pointer;
-      -webkit-app-region: no-drag;
-    }
-  }
-  .right{
-    justify-content: flex-end;
+  justify-content: flex-end;
+  i{
+    font-size: 20px;
+    width:50px;
+    height:50px;
+    line-height:50px;
+    cursor: pointer;
+    -webkit-app-region: no-drag;
   }
 }
 </style>

src/components/zy_sider.vue

@@ -1,19 +1,30 @@
 <template>
   <Row class="sider-box">
     <div class="top">
-      <Icon class="active" type="md-list" />
-      <Icon type="md-search" />
-      <Icon type="md-play" />
-      <Icon type="md-star" />
+      <Icon :class="iconActive === 'list' ? 'active': ''" type="md-list" @click="iconClickEvent('list')"/>
+      <Icon :class="iconActive === 'search' ? 'active': ''" type="md-search" @click="iconClickEvent('search')"/>
+      <Icon :class="iconActive === 'play' ? 'active': ''" type="md-play" @click="iconClickEvent('play')"/>
+      <Icon :class="iconActive === 'collection' ? 'active': ''" type="md-star" @click="iconClickEvent('collection')"/>
     </div>
     <div class="bottom">
-      <Icon type="md-settings" />
+      <Icon :class="iconActive === 'settings' ? 'active': ''" type="md-settings" @click="iconClickEvent('settings')"/>
     </div>
   </Row>
 </template>
 <script>
 export default {
-  name: 'zy-sider'
+  name: 'zy-sider',
+  computed: {
+    iconActive () {
+      return this.$store.getters.getIconActive
+    }
+  },
+  methods: {
+    iconClickEvent (e) {
+      this.$router.push({ name: e })
+      this.$store.commit('SET_ICON_ACTIVE', e)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>

src/router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import List from './views/List.vue'
 
 Vue.use(Router)
 
@@ -10,16 +10,28 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'list',
+      component: List
     },
     {
       path: '/search',
       name: 'search',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "about" */ './views/Search.vue')
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import(/* webpackChunkName: "about" */ './views/Settings.vue')
+    },
+    {
+      path: '/play',
+      name: 'play',
+      component: () => import(/* webpackChunkName: "about" */ './views/Player.vue')
+    },
+    {
+      path: '/collection',
+      name: 'collection',
+      component: () => import(/* webpackChunkName: "about" */ './views/Collection.vue')
     }
   ]
 })

src/store.js

@@ -5,10 +5,24 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    theme: 'light',
+    iconActive: 'list'
+  },
+  getters: {
+    getTheme: state => {
+      return state.theme
+    },
+    getIconActive: state => {
+      return state.iconActive
+    }
   },
   mutations: {
-
+    SET_THEME: (state, payload) => {
+      state.theme = payload
+    },
+    SET_ICON_ACTIVE: (state, payload) => {
+      state.iconActive = payload
+    }
   },
   actions: {
 

src/views/Collection.vue

@@ -0,0 +1,8 @@
+<template>
+  <Row class="collection">collection</Row>
+</template>
+<script>
+export default {
+  name: 'collection'
+}
+</script>

src/views/List.vue

@@ -0,0 +1,10 @@
+<template>
+  <Row>
+    <div class="list">list</div>
+  </Row>
+</template>
+<script>
+export default {
+  name: 'list'
+}
+</script>

src/views/Player.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="home">home</div>
+  <Row class="player">player</Row>
 </template>
 <script>
 export default {
-  name: 'home'
+  name: 'player'
 }
 </script>

src/views/Search.vue

@@ -2,12 +2,12 @@
   <div class="search">search</div>
 </template>
 <script>
-import video from '@/util/util.video'
+// import video from '@/util/util.video'
 export default {
   name: 'search',
   methods: {},
   created () {
-    video.init()
+    // video.init()
   }
 }
 </script>

src/views/Settings.vue

@@ -0,0 +1,16 @@
+<template>
+  <Row>
+    <Button type="primary" @click="switchTheme('light')">light</Button>
+    <Button type="primary" @click="switchTheme('dark')">Dark</Button>
+  </Row>
+</template>
+<script>
+export default {
+  name: 'settings',
+  methods: {
+    switchTheme (e) {
+      this.$store.commit('SET_THEME', e)
+    }
+  }
+}
+</script>